技術標籤：Jquery前端jquery輪播圖

html

    <div class="top">
        <ul id="imgList">
            <!-- <li class="lunbo_img01"><img src="/images/19.jpg" alt=""></li>
            <li class="lunbo_img02"><img src="/images/3a.png" alt=""></li>
            <li class="lunbo_img03"><img src="/images/hist_img.jpg" alt=""></li> -->
 

            <li class="lunbo_img01" index="1"></li>
            <li class="lunbo_img02" index="2"></li>
            <li class="lunbo_img03" index="3"></li>
        </ul>
        <div id="navId"
 
 class="pointer">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>
        <a href="#" rel="external nofollow"
 
 rel="external nofollow" class="arrow01 icon-arrow-right">&gt;</a>
        <a href="#" rel="external nofollow" rel="external nofollow" class="arrow01 icon-arrow-left">&lt;</a>
    </div>

css

.top {
    width: 100%;
    height: 588px;
    position: relative;
    overflow: hidden;
}
#imgList {
    position: absolute;
    width: 7137px;
}
top #imgList li {
    float: left;
    width: 2379px;
    height: 580px;
    list-style: none;
}
.top .lunbo_img01 {
    background: url("/images/19.jpg") no-repeat center;
    background-size: cover;
}

.top .lunbo_img02 {
    background: url("/images/hist_img.jpg") no-repeat center;
    background-size: cover;
}

.top .lunbo_img03 {
    background: url("/images/3a.png") no-repeat center;
    background-size: cover;
}
.pointer {
    position: absolute;
    width: 436px;
    bottom: 30px;
    left: 1000px;
}
.arrow01 {
    position: absolute;
    text-decoration: none;
    width: 40px;
    height: 40px;
    background: #727d8f;
    color: #fff;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    top: 180px;
}
.icon-arrow-left {
    left: 0;
}

.icon-arrow-right {
    right: 0;
}

js

$(function() {
    // 輪播圖
    var imgCount = 3; //圖片個數
    var index = 1; //圖片序號
    var intervalId; //定時器
    var buttonSpan = $('.pointer').children(); //集合（小圓點）
    var _index; //小圓點的索引

    //自動輪播功能，使用定時器
    autoNextPage();
    function autoNextPage() {
        intervalId = setInterval(function() {
            nextPage(true);
            play();
        }, 3000);
    }

    //輪播主要邏輯
    function nextPage(next) {
        var targetLeft = 0;
        //當前的原點去掉on樣式
        $(buttonSpan[index - 1]).removeClass('on');
        if (next) { //往後走
            if (index == 3) { //到最後一張，直接跳到第一張
                targetLeft = 0;
                index = 1;
                console.log("bbbb");
            } else {
                index++;
                console.log("後");
                targetLeft = -2379 * (index - 1);
            }
            console.log(buttonSpan.attr("index"));
            // play();
        } else { //往前走
            if (index == 1) { //在第一張，直接跳到第三張(前一張)
                index = 3;
                targetLeft = -2379 * (imgCount - 1);
                console.log("qian");
            } else {
                index--;
                targetLeft = -2379 * (index - 1);
                console.log("lalal");
            }
            play();
        }
        //改變圖片容器的位置
        $('#imgList').animate({ left: targetLeft + 'px' });

        //更新後的原點加上樣式
        $(buttonSpan[index - 1]).addClass('on');
    }

    //當滑鼠移入，停止輪播
    $('.top').mouseover(
        function() {
            console.log('停止了！');
            clearInterval(intervalId);
        });
    //當滑鼠移出，開始輪播
    $('.top').mouseout(
        function() {
            console.log('開始了！');
            autoNextPage();
        });
    //單擊哪一個小圓點，就跳到哪一張  //事件委託
    clickButtons();
    // buttonSpan[index - 1].click(function() {
    //     targetLeft = -2379 * (index - 1);
    // });
    function clickButtons() {
        var length = buttonSpan.length;


        for (var i = 0; i < length; i++) {
            buttonSpan[i].onclick = function() {
                $(buttonSpan[index - 1]).removeClass('on');
                if ($(this).attr('index') == 1) {
                    index = 3;
                } else {
                    index = $(this).attr('index') - 1;
                }
                nextPage(true);
            }
        }
    }
    function play() {
        //改變little dot的樣式
        $('.pointer').children('span').eq(_index).addClass("on").siblings().removeClass("on");
        $('#imgList').children('li').eq(_index).fadeIn().siblings().fadeOut(); //淡入淡出
    }
    //點選下一頁、上一頁的功能
    $('.icon-arrow-left').click(function() {
       nextPage(false);
    });
    $('.icon-arrow-right').click(function() {
        nextPage(true);
    });

});

實現思路：

參考：https://www.jb51.net/article/145772.htm
https://blog.csdn.net/liutianjie/article/details/84098798