利用jQuery实现向下掉落幻灯片切换



72 285 96



特效描述:利用jQuery实现 向下掉落 幻灯片切换,利用jQuery实现向下掉落幻灯片切换

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.slider.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>

3. HTML代码

<div class="slider-wrap col-width">
    <div class="cycleslider-wrap" style="display: block;">
       <div id="slider" class="cycleslider" style="position: relative; width: 970px; height: 350px;">
             <div class="cycle-slider"><a href="http://51qianduan.com/"><img src="./images/1.jpg" width="970" height="350" alt="用最少的代码完成对多的事情"></a></div>
             <div class="cycle-slider"><a href="http://51qianduan.com/"><img src="images/2.jpg" width="970" height="350" alt="为客户创造价值就是我们存在的价值"></a></div>
              <div class="cycle-slider"><a href="http://51qianduan.com/"><img src="./images/1.jpg" width="970" height="350" alt="用最少的代码完成对多的事情"></a></div>
             <div class="cycle-slider"><a href="http://51qianduan.com/"><img src="images/2.jpg" width="970" height="350" alt="为客户创造价值就是我们存在的价值"></a></div>
        </div>
        <a id="cycle-prev" href="#" style="opacity: 0; left: -50px;">Prev</a>
        <a id="cycle-next" href="#" style="opacity: 0; right: -50px;">Next</a>
        <div id="cycle-nav">
        </div>
    </div>
    <div class="loader" style="display: none;"></div>
</div>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 叠加浮动层 选项卡切换 滑动手风琴 滑动星星打分 层叠叠加 焦点图 幻灯片 图片轮播 其他 图片叠加 图片切换 图片轮播 选项卡自动切换 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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