轮播图

网页轮播图

通过改变图片名称切换图片的操作

//轮播图
        var lis = document.querySelector(' .nav').children;
        var img = document.querySelector('.bannerb img');
        var ban = document.querySelector('.bannerb');
         //轮播，封装一个fn函数，在最下面的代码
        setTimeout(fn, 0);
        var timer = setInterval(fn, 3000);
        //一共设置了五张图片，后缀从0到4，这里从-1开始再由fn函数加一
        var t = -1;
        //左右按钮
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        //鼠标到banner区域左右按钮出现
        ban.addEventListener('mouseenter', function() {
            prev.style.display = 'block';
            next.style.display = 'block';
        })
        //离开时隐藏
        ban.addEventListener('mouseleave', function() {
            prev.style.display = 'none';
            next.style.display = 'none';
        })
        //点击右按钮
        prev.addEventListener('click', function(e) {
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = 'none';
            }
            //排他思想，先让所有小圆点没有颜色
            if (t != 0) {
                t--;
            } else {
                t = 4;
            }
            //让指定小圆点变色
            lis[t].className = 'changeli';
            //重点！！图片的名称设置为一样的前缀后面数字一次改变，就不用把所有图片全部放在一个盒子里然后再滑动
            **img.src = 'xm' + t + '.png';**
            // 点击按钮时重新开启定时器
            clearInterval(timer);
            timer = setInterval(fn, 3000);

        })
        next.addEventListener('click', function(e) {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = 'none';
                }
                //排他
                if (t != 4) {
                    t++;
                } else {
                    t = 0;
                }
                lis[t].className = 'changeli';
                **img.src = 'xm' + t + '.png';**
                // 点击按钮时重新开启定时器
                clearInterval(timer);
                timer = setInterval(fn, 3000);
            })
            function fn() {
            //排他
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = 'none';
            }
            t++;
            //到最后一张图片时切回第一张
            if (t == 5) t = 0;
            //亮黑点
            lis[t].className = 'changeli';
            //换图片
            **img.src = 'xm' + t + '.png';**
        }