javascript寫無縫平移的輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        #container {
            width: 590px;
            height: 470px;
            position: relative;
            margin: 50px auto;
            border:1px solid;
            overflow: hidden;
        }
 
        #imgs {
            height: 470px;
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
        }
        #imgs li {
            width: 590px;
            height: 470px;
            float: left;
        }
        #pages {
            width: 590px;
            height: 30px;
            background: #000;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #pages i {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background: #fff;
            margin:10px;
        }
        #pages i.current {
            background: #f00;
        }
        #prev, #next {
            width: 45px;
            height: 100px;
            background: #000;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
        #next {
            right: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <ul id="imgs">
            <li><a href="#"><img src="images/1.jpg"></a></li>
            <li><a href="#"><img src="images/2.jpg"></a></li>
            <li><a href="#"><img src="images/3.jpg"></a></li>
            <li><a href="#"><img src="images/4.jpg"></a></li>
        </ul>
        <div id="pages"></div>
        <div id="prev"><</div>
        <div id="next">></div>
    </div>
 
    <script src="js/tools.js"></script>
    <script>
        var lis = $("li"), // 所有輪播的圖片盒子
            len = lis.length, // 圖片張數(shù)
            liWidth = lis[0].offsetWidth, // 每個(gè)圖片盒子寬度
            currentIndex = 1, // 當(dāng)前圖片索引
            nextIndex = 2, // 即將顯示圖片的索引
            duration = 3000, // 輪播時(shí)間間隔
            timer = null, // 輪播計(jì)時(shí)器id
            circles = null; // 所有小圓點(diǎn)
 
        /* 動(dòng)態(tài)添加小圓點(diǎn) */
        var html = "";
        for (var i = 0; i < len; i++) {
            html += "<i></i>";
        }
        $("#pages").innerHTML = html;
        // 獲取所添加的所有小圓點(diǎn)DOM元素
        circles = $("i");
        circles[0].className = "current";
 
        // 復(fù)制第一個(gè)與最后一個(gè)圖片盒子
        var first = lis[0].cloneNode(true),
            last = lis[len - 1].cloneNode(true);
        // 添加到 ul#imgs 內(nèi)部
        $("#imgs").appendChild(first);
        $("#imgs").insertBefore(last, lis[0]);
        // 圖片張數(shù)加2
        len += 2;
        // 設(shè)置 ul#imgs 寬度
        $("#imgs").style.width = liWidth * len + "px";
        $("#imgs").style.left = -liWidth + "px";
        
        // 輪播切換函數(shù)
        function move(){
            // 計(jì)算輪播切換定位終點(diǎn)
            var _left = -1 * nextIndex * liWidth;
            // 運(yùn)動(dòng)動(dòng)畫
            animate($("#imgs"), {left : _left}, 200, function(){
                // 運(yùn)動(dòng)結(jié)束，判斷是否還原到原始位置
                if (currentIndex === len - 1) { // 最后
                    currentIndex = 1;
                    nextIndex = 2;
                    $("#imgs").style.left = -liWidth + "px";
                } else if (currentIndex === 0) { // 最前
                    currentIndex = len - 2;
                    nextIndex = len - 1;
                    $("#imgs").style.left = -1 * (len - 2) * liWidth + "px";
                }
            });
            // 輪播過程中，切換小圓點(diǎn)樣式
            // 設(shè)置為紅色背景的小圓點(diǎn)索引
            var circleIndex = nextIndex - 1;
            if (circleIndex < 0)
                circleIndex = len - 3;
            else if (circleIndex >= len - 2)
                circleIndex = 0;
            for (var i = 0; i < len - 2; i++) {
                circles[i].className = "";
            }
            circles[circleIndex].className = "current";
 
            // 修改索引
            currentIndex = nextIndex;
            nextIndex++;
        }
 
        /* 自動(dòng)輪播 */
        timer = setInterval(move, duration);
 
        /* 鼠標(biāo)移入/移出容器范圍，停止/重啟自動(dòng)輪播 */
        $("#container").onmouseenter = function(){
            // 停止自動(dòng)輪播
            clearInterval(timer);
        }
        $("#container").onmouseleave = function(){
            // 重啟自動(dòng)輪播
            timer = setInterval(move, duration);
        }
 
        /* 鼠標(biāo)移入小圓點(diǎn)，切換 */
        $("#pages").onmouseover = function(e){
            var src = e.target;
            if (src.nodeName === "I") {
                // 獲取當(dāng)前移入小圓點(diǎn)的索引
                var index = Array.from(circles).indexOf(src);
                // 設(shè)置 nextIndex
                nextIndex = index + 1;
                // 調(diào)用 move()
                move();
            }
        }
 
        /* 向前/后翻頁 */
        $("#prev").onclick = function(){
            nextIndex = currentIndex - 1;
            move();
        }
 
        $("#next").onclick = function(){
            move();
        }
    </script>
</body>
</html>


歡迎關(guān)注微信公眾號(hào):猴哥說前端