jquery圖片自動輪播效果
阿新 • • 發佈:2019-01-29
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實現圖片自動輪播效果的詳細步驟。有問題或質疑,還請各路大神多多指點……
轉載此文,望說明作者和出處……