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="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
巴特西

javascript写无缝平移的轮播图

最新文章

热门文章
