网页轮播图
通过改变图片名称切换图片的操作
//轮播图
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';**
}