利用jquery实现动画滑动幻灯片展示



45 176 59



特效描述:利用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://51qianduan.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://51qianduan.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://51qianduan.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://51qianduan.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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 flash焦点图 flash幻灯片 flashbanner flash图片轮播 焦点图 幻灯片 轮播图 bar焦点图 带缩略图的幻灯片 图片滑动 图片滑块

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到