咱们今天还是轮播图,今天说jquery的轮播图!
首先,要有个插件:
请无视Zepto插件,他没起到任何作用!
就是这两个啦!
然后就是代码!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入插件--> <script src="../上月插件/jquery-3.1.1.min.js"></script> <script src="../课件/课件/zepto.js"></script> <!--CSS样式--> <style type="text/css"> *{ margin: 0; padding: 0; } img{ 400px; height: 230px; } ul{ /*计算全部图片的宽度*/ 1600px; height: 230px; list-style: none; /*定位*/ position: absolute; } div{ 400px; height: 230px; overflow: hidden; /*定位*/ position: relative; } li{ /*单独图片宽度*/ 400px; float: left; } </style> </head> <body> <div> <ul> <!--图片--> <li><img src="../img/2d.jpg"/></li> <li><img src="../img/2d.jpg"/></li> <li><img src="../img/2d.jpg"/></li> <li><img src="../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>
就是这样,你学会了吗??