使用jQuery實現圖片輪播效果

2022-02-23 16:00:14

jQuery是對JavaScript的簡化，語法沒有太大區別，比較JavaScript更加容易理解，程式碼量更少。

用jQuery實現圖片輪播需要有以下步驟：

1.對圖片區域獲取，想象中我們所用的圖片是按照順序排列起來，按照一定的時間切換圖片的位置來實現輪播

2.對左右兩個按鈕設定監聽，當點選按鈕時，要切換到前一張或者後一張

3.對圖片底部的小圓點設定監聽事件，當點選小圓點時，切換到相應的圖片位置，而且小圓點也要點亮

4.對圖片整體設定定時器，讓圖片自己輪播，再設定一個監聽函數，讓滑鼠在圖片區域懸停的時候停止定時器，挪開的之後繼續輪播。

html+css區域程式碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>焦點輪播圖</title>
    <style type="text/css">
        /*去除內邊距,沒有連結下劃線*/
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*讓<body有20px的內邊距*/
        body {
            padding: 20px;
        }

        /*最外圍的div*/
        #container {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative; /*相對定位*/
            margin: 0 auto;
        }

        /*包含所有圖片的<div>*/

        #list {
            width: 4200px; /*7張圖片的寬: 7*600 */
            height: 400px;
            position: absolute; /*絕對定位*/
            z-index: 1;

        }

        /*所有的圖片<img>*/
        #list img {
            float: left; /*浮在左側*/
        }

        /*包含所有圓點按鈕的<div>*/
        #pointsDiv {
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            left: 250px;
        }

        /*所有的圓點<span>*/

        #pointsDiv span {
            cursor: pointer;
            float: left;
            border: 1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            margin-right: 5px;
        }

        /*第一個<span>*/

        #pointsDiv .on {
            background: orangered;
        }

        /*切換圖示<a>*/

        .arrow {
            cursor: pointer;
            display: none;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            background-color: RGBA(0, 0, 0, 0.3);
            color: #fff;
        }

        /*滑鼠移到切換圖示上時*/
        .arrow:hover {
            background-color: RGBA(0, 0, 0, 0.7);
        }

        /*滑鼠移到整個div區域時*/
        #container:hover .arrow {
            display: block; /*顯示*/
        }

        /*上一個切換圖示的左外邊距*/
        #prev {
            left: 20px;
        }

        /*下一個切換圖示的右外邊距*/
        #next {
            right: 20px;
        }
    </style>
</head>

<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
    </div>
    <div id="pointsDiv">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
</body>

</html>

jsp相關程式碼：

//匯入jQuery庫
<script src="jquery-1.10.1.js"></script>
<script>
    //得到所有照片的div
    var $div = $('#list');
    var $span = $('#pointsDiv>span')
    //獲取照片當前的位置
    var index = 1;
    var isToggleImagEnd = true;
    //點選按鍵往左移動
    $('#prev').click(function () {
        isToggleImg(0)
    });
    //點選按鍵往右移動
    $('#next').click(function () {
        isToggleImg(1)
    });

    function isToggleImg(n) {
        if (isToggleImagEnd) {
            isToggleImagEnd = false;
            if (n == 0) {
                index--;
            } else {
                index++;
            }
            $div.animate({
                left: index * (-600)
            }, 500, function () {
                if (index == 0) {
                    index = 5
                }
                if (index == 6) {
                    index = 1;
                }
                //設定圖片輪播時，從最後一張跳到第一張不會有間隙，跟其他圖片一樣跳轉
                $div.css('left', index * (-600))
                //設定圖片下面的圓點狀態，更改其類屬性
                $span.removeClass('on');
                $($span.get(index - 1)).addClass('on')
                isToggleImagEnd = true;
            })
        }
    }
    //設定延時函數，讓圖片自己定時輪播下一張
    var interval = setInterval(function () {
        isToggleImg(1);
    }, 1000)
    
    //滑鼠圖片上圖片停止輪播，挪開繼續輪播
    $("#container").hover(function () {
        clearInterval(interval)
    }, function () {
        interval = setInterval(function () {
            isToggleImg(1);
        }, 1000)
    })
    
    //對小圓點設定監聽事件，點選小圓點，圖片跳轉
    $span.click(function () {
        index = $(this).index();
        isToggleImg()
    })
</script>

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

使用jQuery實現圖片輪播效果

熱門文章