javascript写无缝平移的轮播图

阅读原文时间：2023年07月08日阅读：4
<!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="data:images/1.jpg"></a></li>
            <li><a href="#"><img src="data:images/2.jpg"></a></li>
            <li><a href="#"><img src="data:images/3.jpg"></a></li>
            <li><a href="#"><img src="data: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, // 图片张数
            liWidth = lis[0].offsetWidth, // 每个图片盒子宽度
            currentIndex = 1, // 当前图片索引
            nextIndex = 2, // 即将显示图片的索引
            duration = 3000, // 轮播时间间隔
            timer = null, // 轮播计时器id
            circles = null; // 所有小圆点

        /* 动态添加小圆点 */
        var html = "";
        for (var i = 0; i < len; i++) {
            html += "<i></i>";
        }
        $("#pages").innerHTML = html;
        // 获取所添加的所有小圆点DOM元素
        circles = $("i");
        circles[0].className = "current";

        // 复制第一个与最后一个图片盒子
        var first = lis[0].cloneNode(true),
            last = lis[len - 1].cloneNode(true);
        // 添加到 ul#imgs 内部
        $("#imgs").appendChild(first);
        $("#imgs").insertBefore(last, lis[0]);
        // 图片张数加2
        len += 2;
        // 设置 ul#imgs 宽度
        $("#imgs").style.width = liWidth * len + "px";
        $("#imgs").style.left = -liWidth + "px";

        // 轮播切换函数
        function move(){
            // 计算轮播切换定位终点
            var _left = -1 * nextIndex * liWidth;
            // 运动动画
            animate($("#imgs"), {left : _left}, 200, function(){
                // 运动结束，判断是否还原到原始位置
                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";
                }
            });
            // 轮播过程中，切换小圆点样式
            // 设置为红色背景的小圆点索引
            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++;
        }
更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599227
手机扫一扫
移动阅读更方便
你可能感兴趣的文章