JavaScript之轮播图制作

目录1.轮播布局2.JS动态效果（1）根据图片个数得到图片列表区域的宽度（2）根据图片个数创建相应的圆点并为每个圆点绑定自定义属性（3）通过事件委托给圆点切换区域绑定点击事件，根据圆点的自定义属性值进行相应的切换（4）通过定时器设置图片自动切换的效果3.解决bug本文主要介绍如何利用原生JS实现简单的轮播图效果，主要分成三大步骤。轮播区域是由一个大模块包裹，设置固定宽高。内部分为图片列表区域和

cloudOnSkyline

2349人浏览 · 2022-07-06 16:28:54

cloudOnSkyline · 2022-07-06 16:28:54 发布

1.轮播布局

2.JS动态效果

（1）根据图片个数得到图片列表区域的宽度

（2）根据图片个数创建相应的圆点并为每个圆点绑定自定义属性

（3）通过事件委托给圆点切换区域绑定点击事件，根据圆点的自定义属性值进行相应的切换

（4）通过定时器设置图片自动切换的效果

3.解决bug

本文主要介绍如何利用原生JS实现简单的轮播图效果，主要分成三大步骤。

1.轮播布局

轮播区域是由一个大模块包裹，设置固定宽高。内部分为图片列表区域和圆点切换区域。图片列表区域存放的是轮播图的图片，圆点切换区域用于后期动态切换图片，由图片个数动态生成。

2.JS动态效果

（1）根据图片个数得到图片列表区域的宽度

imgList.style.width = imgList.children.length * 620 + 'px';

（2）根据图片个数创建相应的圆点并为每个圆点绑定自定义属性

 for (var i = 0; i < imgList.children.length; i++) {
                var aNode = document.createElement('a');
                aNode.setAttribute('index', i);
                circle.appendChild(aNode);
            }

（3）通过事件委托给圆点切换区域绑定点击事件，根据圆点的自定义属性值进行相应的切换

 circle.addEventListener('click', function(e) {
                if (e.target.nodeName != 'A') {
                    return false;
                }
                if (flag) {
                    flag = false;
                    var thisIndex = e.target.getAttribute('index');
                    tIndex = e.target.getAttribute('index') * 1 + 1;
                    slow(imgList, -thisIndex * 620, function() {
                        flag = true;
                    });
                    circlechange(thisIndex);
                }

            })

（4）通过定时器设置图片自动切换的效果

 var tIndex = 1;

            function autoChange() {

                setInterval(function() {
                    if (flag) {
                        flag = false;
                        if (tIndex >= imgListli.length) {
                            tIndex = 0;
                        }
                        slow(imgList, -tIndex * 620, function() {
                            flag = true;
                        });
                        circlechange(tIndex);
                        tIndex++;
                    }
                }, 3000)

            }

3.解决bug

上述效果初步完成以后，可能会出现剧烈的抖动效果，原因在于缓动函数在短时间内被多次调用。

解决这个问题需要利用节流阀，核心原理是：当调用某个函数时，其他函数不会被调用，直到此函数调用结束才会调用其他函数。这里利用flag值的变化进行动态控制。

效果如图所示：

完整代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .banner {
            width: 600px;
            margin: auto;
            border: 10px solid green;
            height: 350px;
            position: relative;
            overflow: hidden;
        }
        
        .imgList img {
            width: 600px;
            height: 350px;
        }
        
        .imgList {
            position: absolute;
        }
        
        .imgList li {
            float: left;
            margin-right: 20px;
            list-style: none;
        }
        
        .circle {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .circle a {
            width: 15px;
            height: 15px;
            background: green;
            border-radius: 50%;
            opacity: .8;
            float: left;
            margin-right: 10px;
            cursor: pointer;
        }
        
        .circle a.hover {
            background: black;
            opacity: .7;
        }
    </style>
</head>

<body>
    <div class="banner">

        <ul class="imgList">
            <li><img src="1.png" /></li>
            <li><img src="2.jpg" /></li>
            <li><img src="3.jpg" /></li>
            <li><img src="4.jpg" /></li>
        </ul>
        <div class="circle">
        </div>
    </div>




    <script type="text/javascript">
        var imgList = document.querySelector('.imgList');
        var circle = document.querySelector('.circle');
        var circleA = circle.children;
        var imgListli = imgList.children;
        var thisIndex = 0;
        var flag = true;

        window.onload = function() {

            imgList.style.width = imgList.children.length * 620 + 'px';

            autoChange();

            for (var i = 0; i < imgList.children.length; i++) {
                var aNode = document.createElement('a');
                aNode.setAttribute('index', i);
                circle.appendChild(aNode);
            }

            circle.addEventListener('click', function(e) {
                if (e.target.nodeName != 'A') {
                    return false;
                }

                if (flag) {
                    flag = false;
                    var thisIndex = e.target.getAttribute('index');
                    tIndex = e.target.getAttribute('index') * 1 + 1;
                    slow(imgList, -thisIndex * 620, function() {
                        flag = true;
                    });
                    circlechange(thisIndex);
                }

            })
            var tIndex = 1;

            function autoChange() {

                setInterval(function() {
                    if (flag) {
                        flag = false;
                        if (tIndex >= imgListli.length) {
                            tIndex = 0;
                        }
                        slow(imgList, -tIndex * 620, function() {
                            flag = true;
                        });
                        circlechange(tIndex);
                        tIndex++;
                    }
                }, 3000)

            }

            function circlechange(t) {
                for (var i = 0; i < circleA.length; i++) {
                    circleA[i].className = '';
                }
                circleA[t].className = 'hover';
            }

            function slow(obj, target, getflag) {
                obj.myInter = setInterval(function() {
                    var offsetLeft = obj.offsetLeft;
                    var num = (target - offsetLeft) / 10;
                    num > 0 ? num = Math.ceil(num) : num = Math.floor(num);
                    if (offsetLeft == target) {
                        clearInterval(obj.myInter);
                        getflag && getflag();
                    } else {
                        obj.style.left = offsetLeft + num + 'px';
                    }
                }, 10)
            }

        }
    </script>

</body>

</html>