jquery實現圖片自動輪播效果

2022-02-23 16:00:02

本文範例為大家分享了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實現圖片自動輪播效果的詳細步驟。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

jquery實現圖片自動輪播效果

熱門文章