"/>
Heim > Artikel > Web-Frontend > Teilen Sie den Beispielcode des JQuery-Karusselldiagramms
Wir sind heute immer noch Karussellbilder, und heute sprechen wir über Jquery-Karussellbilder!
Zunächst benötigen Sie ein Plug-in:
Bitte ignorieren Sie das Zepto-Plugin , es spielt keine Rolle!
Das ist es!
Dann ist da noch der Code!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入插件--> <script src="../上月插件/jquery-3.1.1.min.js?1.1.11"></script> <script src="../课件/课件/zepto.js?1.1.11"></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="../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>
Das ist es, du lernst. Ist es schon fertig??
Das obige ist der detaillierte Inhalt vonTeilen Sie den Beispielcode des JQuery-Karusselldiagramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!