您好,登錄后才能下訂單哦!
這篇文章主要介紹“jquery如何實(shí)現(xiàn)圖片自動輪播效果”,在日常操作中,相信很多人在jquery如何實(shí)現(xiàn)圖片自動輪播效果問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”jquery如何實(shí)現(xiàn)圖片自動輪播效果”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
效果圖如下:
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>
jquery來實(shí)現(xiàn)圖片自動無縫輪播的效果,步驟及代碼如下:
步驟一:引入jquery文件,代碼如下:
<script type="text/javascript" src="jquery-1.7.min.js"></script>
步驟二:創(chuàng)建兩個函數(shù),分別控制圖片向左右移動 - - moveRight() 和 moveLeft(),代碼如下:
//右移函數(shù) function moveRight(){ var left=$('#scroll_pic').position().left; //獲取元素相對于左端的偏移量 $('#scroll_pic').animate({"left":"+="+oLiWidth+"px"},800) //函數(shù)每被調(diào)用一次匹配元素發(fā)生水平偏移 } //左移函數(shù) function moveLeft(){ var left=$('#scroll_pic').position().left; $('#scroll_pic').animate({"left":"-="+oLiWidth+"px"},800); }
步驟三:完成對應(yīng)事件的綁定,實(shí)現(xiàn)基本的手動播放效果,代碼如下:
//事件綁定 $('.left').on('click',moveRight); $('.right').on('click',moveLeft);
步驟四:實(shí)現(xiàn)手動輪播效果,即:分別為上述兩個偏移函數(shù)【moveRight() 和 moveLeft()】添加條件判斷。代碼如下:
//右移函數(shù) 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);//動畫結(jié)束,重新綁定click事件 }) } //左移函數(shù) 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); }) }
步驟五:實(shí)現(xiàn)圖片自動輪播效果,即:添加定時器。代碼如下:
//定時器 function autoRun(){ return setInterval(moveLeft,2000); } var timer=autoRun(); //調(diào)用定時器;
步驟六:為最外層容器,添加鼠標(biāo)移入移出事件,實(shí)現(xiàn)手動暫停自動輪播的效果。代碼如下:
$('#container').hover(function(){ clearInterval(timer); },function(){ timer=autoRun(); })
到此,關(guān)于“jquery如何實(shí)現(xiàn)圖片自動輪播效果”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。