咱们今天还是轮播图,今天说jquery的轮播图!首先,要有个插件:请无视Zepto插件,他没起到任何作用!就是这两个啦!然后就是代码!<!DOCTYPE html><html><head><meta charset="utf-8 ...
咱们今天还是轮播图,今天说jquery的轮播图!
首先,要有个插件:
请无视Zepto插件,他没起到任何作用!
就是这两个啦!
然后就是代码!
<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <!--引入插件--> <script src='/images/loading.gif' data-original="../上月插件/jquery-3.1.1.min.js"></script> <script src='/images/loading.gif' data-original="../课件/课件/zepto.js"></script> <!--CSS样式--> <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 400px; height: 230px; } ul{ /*计算全部图片的宽度*/ width:1600px; height: 230px; list-style: none; /*定位*/ position: absolute; } div{ width: 400px; height: 230px; overflow: hidden; /*定位*/ position: relative; } li{ /*单独图片宽度*/ width:400px; float: left; } </style></head><body><div> <ul> <!--图片--> <li><img src='/images/loading.gif' data-original="../img/2d.jpg"/></li> <li><img src='/images/loading.gif' data-original="../img/2d.jpg"/></li> <li><img src='/images/loading.gif' data-original="../img/2d.jpg"/></li> <li><img src='/images/loading.gif' data-original="../img/2d.jpg"/></li> </ul></div><script type="text/javascript"> var x = 0,TimerId; function strTimer(){ TimerId = setInterval(function(){ //判断,如果是第三张图片的时候,那么就变成第一张图片,实现循环的效果 if(x == -1200){ x = 0; $("ul :first").css("left",0 + "px"); } if(x % 400 == 0){ stop(1); } $("ul:first").css("left",x-- + "px"); },10); } function stop(n){ if(n == 1){ clearInterval(TimerId); setTimeout(strTimer,500); }else{ clearInterval(TimerId); } } strTimer(); (zepot);</script></body></html>
原标题：jquery轮播图
关键词：jquery
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
