jquery动画滑动幻灯片代码

春外套 2019-11-19 121 阅读

特效描述:利用jquery实现动画滑动幻灯片展示,利用jquery实现动画滑动幻灯片展示

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/styles.css" />

<link rel="stylesheet" type="text/css" href="css/styles.css" />

2. 引入JS

<script type="text/javascript" src="jquery_ui.js"></script>

<script type="text/javascript" src="promo.js"></script>

<script type="text/javascript" src="custom.js"></script>

<script type="text/javascript" src="jquery_ui.js"></script>

<script type="text/javascript" src="promo.js"></script>

<script type="text/javascript" src="custom.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery_ui.js"></script>
<script type="text/javascript" src="promo.js"></script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body id="introduction">
<div id="page">
<div id="container" class="content clearfix">
<div class="promo">
<div class="stage">
<a class="arrow left" href="#promo_4"> </a>
<a class="arrow right" href="#promo_2"> </a>
<a class="playstate" href="#"> </a>
<ul>
<li class="first active">
<ul>
<li>
<img src="images/1.png" alt="" />
</li>
<li>
<img src="images/2.png" alt="" />
</li>
<li>
<img src="images/3.png" alt="" />
</li>
</ul>
<a href="http://cxvn.com" class="link ">
<img src="images/invisible.gif" height="430" width="840" style="height: 430px; width: 840px; display: block;" alt="" />
</a>
</li>
<li>
<ul>
<li style="display: none;">
<img src="images/4.png" alt="" />
</li>
<li style="display: none;">
<img src="images/5.png" alt="" />
</li>
<li style="display: none;">
<img src="images/6.png" alt="" />
</li>
</ul>
<a href="http://cxvn.com" class="link ">
<img src="images/invisible.gif" height="430" width="840" style="height: 430px; width: 840px; display: block;" alt="" />
</a>
</li>
<li>
<ul>
<li style="display: none;">
<img src="images/7.png" alt="" />
</li>
<li style="display: none;">
<img src="images/8.png" alt="" />
</li>
<li style="display: none;">
<img src="images/9.png" alt="" />
</li>
</ul>
<a href="http://cxvn.com" class="link ">
<img src="images/invisible.gif" height="430" width="840" style="height: 430px; width: 840px; display: block;" alt="" />
</a>
</li>
<li>
<ul>
<li style="display: none;">
<img src="images/10.png" alt="" />
</li>
<li style="display: none;">
<img src="images/11.png" alt="" />
</li>
<li style="display: none;">
<img src="images/12.png" alt="" />
</li>
</ul>
<a href="http://cxvn.com" class="link ">
<img src="images/invisible.gif" height="430" width="840" style="height: 430px; width: 840px; display: block;" alt="" />
</a>
</li>
</ul>
</div>
<ul class="nav">
<li class="first">
<a class="active" href="#promo_1">
<span class="info"><img src="images/13.png" alt="" />EADS Corporate Website</span>
<span class="loading"> </span>
</a>
</li>
<li>
<a class="" href="#promo_2">
<span class="info"><img src="images/14.png" alt="" />KS/AUXILIA</span>
<span class="loading"> </span>
</a>
</li>
<li>
<a class="" href="#promo_3">
<span class="info"><img src="images/15.png" alt="" />Bain Microsite</span>
<span class="loading"> </span>
</a>
</li>
<li>
<a class="" href="#promo_4">
<span class="info"><img src="images/16.png" alt="" />Wittenberg Flash Site</span>
<span class="loading"> </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div><br><br><br>
</font> </p><br>
</body>
</html>

演示地址下载地址

最新游戏