jquery實現圖片自動輪播效果
本文實例為大傢分享瞭jquery實現圖片自動輪播效果的具體代碼,供大傢參考,具體內容如下
HTML代碼如下:
<div id="container"> <img src="icon1.jpg" class="left"> <img src="icon2.jpg" class="right"> <div id="scroll"> <div id="scroll_pic"> <ul class="count"> <li><img src="1.jpg" title="1.jpg"><span>1</span></li> <li><img src="2.jpg" title="2.jpg"><span>2</span></li> <li><img src="3.jpg" title="3.jpg"><span>3</span></li> <li><img src="4.png" title="4.png"><span>4</span></li> <li><img src="3.jpg" title="3.jpg"><span>5</span></li> </ul> <ul> <li><img src="1.jpg" title="1.jpg"><span>11</span></li> <li><img src="2.jpg" title="2.jpg"><span>22</span></li> <li><img src="3.jpg" title="3.jpg"><span>33</span></li> <li><img src="4.png" title="4.png"><span>44</span></li> <li><img src="3.jpg" title="3.jpg"><span>55</span></li> </ul> </div> </div> </div>
以上是這個圖片輪播效果的css的佈局樣式及html代碼部分(相信大傢很容易實現!就不贅述瞭……),下面一起來看用jquery如何實現此效果吧!
jquery來實現圖片自動無縫輪播的效果,步驟及代碼如下:
步驟一:引入jquery文件,代碼如下:
<script type="text/javascript" src="jquery-1.7.min.js"></script>
步驟二:創建兩個函數,分別控制圖片向左右移動 – – moveRight() 和 moveLeft(),代碼如下:
//右移函數 function moveRight(){ var left=$('#scroll_pic').position().left; //獲取元素相對於左端的偏移量 $('#scroll_pic').animate({"left":"+="+oLiWidth+"px"},800) //函數每被調用一次匹配元素發生水平偏移 } //左移函數 function moveLeft(){ var left=$('#scroll_pic').position().left; $('#scroll_pic').animate({"left":"-="+oLiWidth+"px"},800); }
步驟三:完成對應事件的綁定,實現基本的手動播放效果,代碼如下:
//事件綁定 $('.left').on('click',moveRight); $('.right').on('click',moveLeft);
步驟四:實現手動輪播效果,即:分別為上述兩個偏移函數【moveRight() 和 moveLeft()】添加條件判斷。代碼如下:
//右移函數 function moveRight(){ $('.left').off('click'); //移除click事件 var left=$('#scroll_pic').position().left; //輪播條件控制語句 if(left==0){ $('#scroll_pic').css('left',-oLiWidth*oLi+'px'); } $('#scroll_pic').animate({"left":"+="+oLiWidth+"px"},800,function(){ $('.left').on('click',moveRight);//動畫結束,重新綁定click事件 }) } //左移函數 function moveLeft(){ $('.right').off('click'); var left=$('#scroll_pic').position().left; if(left==-oLiWidth*oLi){ $('#scroll_pic').css('left',0); } $('#scroll_pic').animate({"left":"-="+oLiWidth+"px"},800,function(){ $('.right').on('click',moveLeft); }) }
步驟五:實現圖片自動輪播效果,即:添加定時器。代碼如下:
//定時器 function autoRun(){ return setInterval(moveLeft,2000); } var timer=autoRun(); //調用定時器;
步驟六:為最外層容器,添加鼠標移入移出事件,實現手動暫停自動輪播的效果。代碼如下:
$('#container').hover(function(){ clearInterval(timer); },function(){ timer=autoRun(); })
以上為jquery實現圖片自動輪播效果的詳細步驟。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。