上次我们把轮播图把轮播图的静态界面和部分功能做出来了,今天我们要实现轮播图一下四个功能。
- 图片播放时,下面的小圆圈随着一齐变化
- 点击小圆圈,可以播放相应的图片
- 鼠标经过轮播图时,轮播时停止播放
- 鼠标移开时自动播放
第一个目标,点击按钮图片播放时,下面的小圆圈随着一齐变化 。这里可以分为这两个动作
1.点击按钮切换图片
在点击鼠标切换的时候,就是把img_room的left属性进行规律变化,即左右加减值。再调用封装好的缓动动画函数。
//实现左右切换图片
but_left.addEventListener('click', function() {
if (num == 0) {
num = img_num.length - 1;
img_room.style.left = -num * img_width + 'px';
};
num--;
animate(img_room, -img_width * num, );
xiaoyuan(num);
});
but_right.addEventListener('click', function() {
//点击右箭头如果num等于img的数量-1时
if (num == img_num.length - 1) {
img_room.style.left = 0 + 'px';
num = 0;
}
num++;
animate(img_room, -img_width * num, );
xiaoyuan(num);
});
2.图片切换的同时,底部的小圆也跟着变动
封装一个小圆点切换的函数。运用的思想是排他思想
//一个修改小圆圈背景颜色
function xiaoyuan(count) {
img_num = document.querySelector('.img_room').querySelectorAll('li');
console.log(img_num.length);
//清除所有的小圆圈的背景颜色
for (var i = 0; i <= img_num.length - 2; i++) {
buttom_item_ul.children[i].className = 'li_current_none';
};
//判断图片到哪个位置
if (count >= 1 && count <= img_num.length - 2) {
buttom_item_ul.children[num].className = 'li_current';
} else if (count === 0 || count === img_num.length - 1) {
buttom_item_ul.children[0].className = 'li_current';
};
}
鼠标经过轮播图时,轮播时停止播放
// 2. 鼠标经过focus 就显示隐藏左右按钮
lunbo.addEventListener('mouseenter', function() {
but_right.style.display = 'block';
but_left.style.display = 'block';
clearInterval(timer);
});
lunbo.addEventListener('mouseleave', function() {
but_right.style.display = 'none';
but_left.style.display = 'none';
//周期循环播放图片
timer = setInterval(function() {
but_right.click();
}, 2000);
});
另外自动播放
//周期循环播放图片
var timer = setInterval(function() {
but_right.click();
}, 2000);