利用Javascript制作轮播图最终版--滑动效果

我不是女神ヾ 2023-02-15 10:16 6阅读 0赞

## JS最快速度制作滑动效果的轮播图 ##

前面几篇博客一直在讲轮播图的制作，这篇博客是最终版，实现轮播图的滑动效果。如图：

![在这里插入图片描述][2020060501223396.gif_pic_center]

**HTML代码：**

**CSS代码：**

* { 
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            .box { 
                width: 500px;
                height: 300px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                border: 20px yellow solid;
                overflow: hidden;
            }
            
            img { 
                width: 500px;
                height: 300px;
            }
            
            .btn, .points { 
                position: absolute;
                cursor: pointer;
            }
            
            .btn { 
                width: 20px;
                height: 40px;
                background: green;
                color: white;
                font-size: 20px;
                text-align: center;
                line-height: 40px;
                top: 50%;
                margin-top: -20px;
                z-index: 999;
            }
            
            .btn_l { 
                left: 0;
            }
            
            .btn_r { 
                right: 0;
            }
            
            .points { 
                width: 100px;
                height: 20px;
                border-radius: 20px;
                background: skyblue;
                left: 50%;
                margin-left: -50px;
                bottom: 30px;
            }
            
            .points .red { 
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: red;
                float: left;
                margin: 2.5px 5px;
            }
            
            .points li.blue { 
                background: blue;
            }
            
            .min_box { 
                width: 3000px;
                height: 300px;
                background: skyblue;
                position: absolute;
                top: 0px;
                left: -500px;
            }
            
            .min_box .banner { 
                width: 500px;
                height: 300px;
                float: left;
            }
            
            .min_box .banner:nth-of-type(2), .min_box .banner:nth-of-type(6) { 
                background: url("../0602/img/2.jpg");
            }
            
            .min_box .banner:nth-of-type(3) { 
                background: url("../0602/img/3.jpg");
            }
            
            .min_box .banner:nth-of-type(4) { 
                background: url("../0602/img/4.jpg");
            }
            
            .min_box .banner:nth-of-type(1), .min_box .banner:nth-of-type(5) { 
                background: url("../0602/img/1.jpg");
            }

**JS代码：**

// 1.获取元素
        var oBtn_l = document.getElementsByClassName('btn_l')[0];
        var oBtn_r = document.getElementsByClassName('btn_r')[0];
        var aLi = document.getElementsByClassName('red');
        var oBox = document.getElementById('box');
        var oBanner = document.getElementById('banner');
    
        var liIndex = 0;
        var picIndex = 1;
        var timer;
    
        function clear() { 
            for (var i = 0; i < aLi.length; i++) { 
                aLi[i].className = 'red';
            }
            aLi[liIndex].className = 'red blue';
        }
        // 右键点击事件
        oBtn_r.onclick = function() { 
            next();
        };
    
        function next() { 
            picIndex++;
            liIndex++;
            liIndex = liIndex === aLi.length ? 0 : liIndex;
            oBanner.style.left = -(picIndex * 500) + 'px';
            oBanner.style.transition = 'all 0.3s ease';
            if (picIndex === 5) { 
                picIndex = 1;
                setTimeout(() => { 
                    oBanner.style.left = '-500px';
                    oBanner.style.transition = 'unset';
                }, 300);
            }
            clear();
        }
        // 左键点击事件
        oBtn_l.onclick = function() { 
            picIndex--;
            liIndex--;
            liIndex = liIndex === -1 ? aLi.length - 1 : liIndex;
            oBanner.style.left = -(picIndex * 500) + 'px';
            oBanner.style.transition = 'all 0.3s ease';
            if (picIndex === 0) { 
                picIndex = 4;
                setTimeout(() => { 
                    oBanner.style.left = '-2000px';
                    oBanner.style.transition = 'unset';
                }, 300);
            }
            clear();
        };
    
        // 四个点
        for (var i = 0; i < aLi.length; i++) { 
            aLi[i].a = i;
            aLi[i].onclick = function() { 
                picIndex = this.a + 1;
                liIndex = this.a;
                oBanner.style.left = -(picIndex * 500) + 'px';
                oBanner.style.transition = 'all 0.3s ease';
                clear();
            };
        }
    
        // 添加定时器
        timer = setInterval(next, 1000);
    
        // 鼠标移入时，清除定时器
        oBox.onmouseover = function() { 
            clearInterval(timer);
        }
    
        // 鼠标移出时
        oBox.onmouseout = function() { 
            timer = setInterval(next, 1000);
        }

**总结：** 给轮播图添加滑动效果主要在于让小盒子在切换位移时加上过渡的时间。同时利用障眼法，在图片的首尾再添加上图片。

当然，这个只是一些平时练习的时候搞一搞，熟悉了里边的原理，真正工作时使用轮播图插件即可。不如**swiper.js**。

[2020060501223396.gif_pic_center]: https://img-blog.csdnimg.cn/2020060501223396.gif#pic_center