jquery例項-多張圖片無縫滾動實現
阿新 • • 發佈：2019-01-31
演示效果：
html頁面程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多張圖片無縫滾動實現</title> <link rel="stylesheet" href="sider.css"/> <script src="../jquery-1.8.3.js"></script> <script src="sider.js"></script> </head> <body> <a href="#" id="leftmove">向左走</a> <a href="#" id="rightmove">向右走</a> <div class="siderImg"> <ul> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> <li><img src="5.jpg" alt=""></li> </ul> </div> </body> </html>
css程式碼：
*{ padding: 0; margin:0; } body{ margin:50px; } li{ list-style-type: none; } .siderImg{ width:800px; height: 200px; border: 5px solid #abcdef; position: relative; overflow: hidden; /*內容隱藏溢位,超出部分自動隱藏*/ } .siderImg ul{ overflow: hidden; /*清除ul浮動*/ width: 1600px; height:200px; left: 0px; /*相對於起點*/ position:absolute; _height:1px; /*IE相容清除浮動*/ } .siderImg ul li{ float:left; cursor: pointer; /*設定滑鼠樣式為手狀*/ }
jquery程式碼：
/** 多張圖片無縫滾動實現 */ $(document).ready(function(){ var $siderImg = $(".siderImg ul"); var $siderImgHtml = $siderImg.html(); $siderImg.html($siderImgHtml+$siderImgHtml); var $imgWidth = $siderImg.children().eq(0).css("width"); //img元素的寬度 var $size = $siderImg.children().size(); //img元素的個數 var $ulWidth = $imgWidth.split("px")[0] * $size; //獲取ul中img元素的總寬度 $siderImg.css("width",$ulWidth+"px"); //設定ul中寬度 $leftVar=0; var $temp=-8; var $interval = null; //圖片滾動方法 var moveImg=function() { $leftVar=$leftVar+$temp; //判斷圖片滾動方向 if($temp>0) { if($leftVar==0) { $leftVar =-$ulWidth/2; //向左走重置 } } if($temp<0) { if($leftVar==-$ulWidth/2) { $leftVar = 0; //向右走重置 } } $siderImg.css("left",$leftVar+"px"); }; //設定一定時間呼叫反覆呼叫該函式 interval = setInterval(moveImg,300); /*滑鼠待在元素上面觸發該事件*/ $siderImg.mouseover(function(){ clearInterval(interval); }); /*滑鼠移開觸發該事件*/ $siderImg.mouseout(function(){ interval = setInterval(moveImg,300); }) $("#leftmove").click(function(){ $temp = -8; }); $("#rightmove").click(function(){ $temp = 8; }); });