原生JS实现图片轮播--淡入淡出

快来打我* 2021-10-24 00:54 472阅读 0赞

本篇博客所实现的图片轮播是较为简单的一种轮播，轮播效果为固定的位置不同图片的切换，所以首先需要对页面进行简单的布置  
HTML部分

CSS部分

下面是实现的静态页面图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25yc2toZHps_size_16_color_FFFFFF_t_70]  
下来是本轮播的关键部分实现，本轮播要实现的是在上图那个固定区域实现图片淡入淡出播放，而且当鼠标进入轮播轮播暂停自动播放，鼠标出来轮播接着自动播放，点击左右两端的按钮轮播进行相应的切换，鼠标进入底部的小点轮播也进行相应的切换，下面是JS部分代码的实现

var time;//接受计时器
        var aPar = document.getElementsByClassName("a")[0];
        var block = document.getElementsByClassName("b")[0];
        var dianpar = document.getElementsByClassName("dian")[0];
        //获取左右按钮
        var btnleft = document.getElementsByClassName("btnleft")[0];
        var btnright = document.getElementsByClassName("btnright")[0];
        var nowbg = dianpar.children[0];//当前变色的点元素
        //调整层
        for (var i = 0; i < aPar.children.length; i++) {
            aPar.children[i].style.zIndex = aPar.children.length - i - 1;
        }
        showAnimate();
        function showAnimate() {
            time = setInterval(function () {
                countAnimate(1);
            }, 2000);
        }
        function countAnimate(num) {
            for (var k = 0; k < num; k++) {
                for (var i = 0; i < aPar.children.length; i++) {
                    var index = aPar.children[i].style.zIndex;
                    index++;
                    if (index == aPar.children.length) {
                        index = 0;
                        aPar.children[i].className = "imgop";
                        dianpar.children[i].className = "";
                    }
                    if (index == aPar.children.length - 1) {
                        dianpar.children[i].className = "dbg";
                        nowbg = dianpar.children[i];
                        aPar.children[i].className = "imgopshow";
                    }
                    aPar.children[i].style.zIndex = index;
                }
            }
        }
        block.onmouseenter = function () {
            clearInterval(time);
        }
        block.onmouseleave = function () {
            showAnimate();
        };
        for (var i = 0; i < dianpar.children.length; i++) {
            dianpar.children[i].index = i;
            dianpar.children[i].onmouseenter = function () {
                nowbg.className = "";
                this.className = "dbg";
                var num = 0;
                if (this.index - nowbg.index > 0) {
                    num = this.index - nowbg.index;
                }
                else {
                    num = dianpar.children.length - Math.abs(this.index - nowbg.index);
                }
                countAnimate(num);
                nowbg = this;
            }
        }
        //处理掉浏览器的默认选择
        document.onselectstart = function () {
            return false;
        }
        btnleft.onclick = function () {
            countAnimate(7);
        }
        btnright.onclick = function () {
            countAnimate(1);
        }

以上就是本轮播所有代码的实现

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25yc2toZHps_size_16_color_FFFFFF_t_70]: /images/20211023/51c93003bf7f489cbd2b5d549dc188cd.png