JS实现轮播图(自动+手动)

网页轮播图效果：核心原理：tips:代码在文章末尾这个ul就是我们这四张图片的父盒子，我们通过对这个父盒子添加动画函数来实现移动，然后给父盒子来一个溢出隐藏就达到了轮播的效果动画函数如下：function animate(obj,target,callback) {//先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setIn

YinJie…

16894人浏览 · 2022-03-23 16:34:24

YinJie… · 2022-03-23 16:34:24 发布

网页轮播图效果：

请添加图片描述

核心原理：

tips:代码在文章末尾
在这里插入图片描述
这个ul就是我们这四张图片的父盒子，我们通过对这个父盒子添加动画函数来实现移动，然后给父盒子来一个溢出隐藏就达到了轮播的效果

动画函数如下：

function animate(obj,target,callback) {
    //先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
    //步长值写到定时器里面
    //把我们步长值改为整数，不要出现小数的问题    
    var step = (target-obj.offsetLeft) / 10;
    //如果向右走就向上取整，向左走就向下取整
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if(obj.offsetLeft == target)
    {
        clearInterval(obj.timer);
        //回调函数写到定时器结束里面
        if(callback) {
            callback();//调用函数
        }
    }
    else {
        obj.style.left = obj.offsetLeft + step + 'px';
    }
    },10);
}

在本例中，我们将这个动画函数封装在一个js文件里，这样我们在移动父盒子时，就可以直接调用这个动画函数。
对这里有疑问的同学可以去我的上一篇讲动画函数封装的文章里了解一下。

功能分析

我们分析下要做一个完美的网页轮播图都应该具备哪些功能：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
图片播放的同时，下面小圆圈模块跟随一起变化。
点击小圆圈，可以播放相应图片。
鼠标不经过轮播图，轮播图也会自动播放图片。
鼠标经过，轮播图模块，自动播放停止。

代码示例

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box {
        position: relative;
        margin: 200px auto;
        width: 721px;
        height: 455px;
        overflow: hidden;
    }
    .left,
    .right {
        display: none;
        position: absolute;
        width: 25px;
        height: 35px;
        background: rgba(0, 0, 0, .3);
        line-height: 30px;
        text-align: center;
        font-size: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }
    a {
        text-decoration: none;
        color: #fff;
    }
    li {
        list-style: none;
    }
    a:hover {
        color: red;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    .circle {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    .circle li {
        float: left;
        width: 10px;
        height: 10px;
        margin: 0 5px;
        border: 2px solid rgba(255, 255, 255, .5);
        border-radius: 50%;
        /*鼠标经过显示小手*/
        cursor: pointer;
        box-shadow: 1px 1px;
    }
    .current {
        background-color: #fff;
    }
    ul {
        position: absolute;
        display: flex;
    }
    </style>
    <script src="animate.js"></script>
</head>
<body>
    <div class="box">
        <div class="left">
            <a href="javascript:;"><</a>
        </div>
        <div class="right">
            <a href="javascript:;">></a>
        </div>
        <ul class="img">
            <li><a href="javascript:;"><img src="focus.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="focus1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="focus2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="focus3.jpg" alt=""></a></li>
        </ul>
        <ol class="circle">
        </ol>
    </div>
    <script>
         window.addEventListener('load',function() {
            // 1. 获取元素
            var left = document.querySelector('.left');
            var right = document.querySelector('.right');
            var box = document.querySelector('.box');
            var circle = document.querySelector('.circle');
            var img = document.querySelector('.img');
            var focus = box.offsetWidth;
            var num = 0;
            box.addEventListener('mouseenter',function() {
            // 2. 鼠标经过focus 就显示隐藏左右按钮
               left.style.display = 'block';
               right.style.display = 'block';
               clearInterval(timer);
               timer = null;// 清除定时器变量
             })
            box.addEventListener('mouseleave',function() {
                left.style.display = 'none';
                right.style.display = 'none';
                timer = setInterval(function() {
                    right.click();//手动调用点击事件
                },2000)
            })
            // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
            for(var i = 0;i<img.children.length;i++)
            {
                var li = document.createElement('li');
                li.setAttribute('index',i);
                circle.appendChild(li);
                // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
                li.addEventListener('click',function() {
                // 干掉所有人 把所有的小li 清除 current 类名
                    for(var i = 0;i<circle.children.length;i++)
                    {
                        circle.children[i].className = '';
                    }
                    // 留下我自己  当前的小li 设置current 类名
                    this.className = 'current';
                    // 5. 点击小圆圈，移动图片 当然移动的是 ul 
                    // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
                     // 当我们点击了某个小li 就拿到当前小li 的索引号
                    var index = this.getAttribute('index');
                    // 当我们点击了某个小li 就要把这个li 的索引号给 num  
                    num = index;
                    animate(img,-index*focus);
                })
                
            }
            // 把ol里面的第一个小li设置类名为 current
            circle.children[0].className = 'current';
            // 6. 克隆第一张图片(li)放到ul 最后面
            var first = img.children[0].cloneNode(true);
            img.appendChild(first);
            var flag = true;//节流阀(防止轮播图点击速度过快）
            // 7. 点击右侧按钮， 图片滚动一张
            right.addEventListener('click',function() {
                if(flag){
                    flag = false;
                    for(var i = 0;i<circle.children.length;i++)
                    {
                        circle.children[i].className = '';
                    }
                    // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
                    if(num==img.children.length-1) 
                    {
                        img.style.left = 0;
                        num = 0;
                    }
                    num++;
                    animate(img,-num*focus,function() {
                            flag = true;
                    });
                    if(num==img.children.length-1)
                    {
                        circle.children[0].className = 'current';
                    }
                    else{
                        circle.children[num].className = 'current';
                    }
                    
                    
                }
            });
             // 9. 左侧按钮做法
            left.addEventListener('click',function() {
                if(flag){
                    flag = false;
                    for(var i = 0;i<circle.children.length;i++)
                    {
                        circle.children[i].className = '';
                    }
                    if(num==0) 
                    {
                        num = img.children.length-1;
                        img.style.left = -num*focus + 'px';
                    }
                    num--;
                    animate(img,-num*focus,function() {
                            flag = true;
                    });
                    circle.children[num].className = 'current';
                }
            });
             // 10. 自动播放轮播图
            var timer = setInterval(function() {
                right.click();
            },1500)
         })
    </script>
</body>
</html>