效果
需求
| 需求 | |
|---|---|
| 1.鼠标移上去轮播停止，移除轮播继续 | onmousemove：事件会在鼠标指针移动到指定的对象上时发生。onmouseout：事件会在鼠标指针移出指定的对象时发生 |
| 2.点击按钮可以左右切换 | 通过绑定点击事件并且利用清除添加active的方法（即索引与class的联系） |
| 3.自动轮播效果 | 计时器 |
| 4.点击小圆点达到指定图片跳转的效果 | 在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字，eg：data-index") 才能获取这个属性的值；还有 this指向 的知识 |
这个是点击按钮时的逻辑思路：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="lb.css">
</head>
<body>
<!-- 轮播图主体 -->
<div class="wrap">
<!--图片list-->
<ul class="list">
<li class="item active"><img src="./wrap/1.jpg"></li>
<li class="item"><img src="./wrap/2.jpg"></li>
<li class="item"><img src="./wrap/3.jpg"></li>
<li class="item"><img src="./wrap/4.jpg"></li>
</ul>
<!-- 对应的下面的小圆点 -->
<ul class="pointList">
<li class="point active" data-index = 0></li>
<li class="point" data-index = 1></li>
<li class="point" data-index = 2></li>
<li class="point" data-index = 3></li>
</ul>
<!-- 左右两个按钮 -->
<button class="btn" id="leftBtn"> < </button>
<button class="btn" id="rightBtn"> > </button>
</div>
<script>
//获取元素
//图片
var items = document.querySelectorAll(".item");
//点
var points = document.querySelectorAll(".point")
//按钮
var left = document.getElementById("leftBtn");
var right = document.getElementById("rightBtn");
//整体
var all = document.querySelector(".wrap")
var index = 0;//初始为第一张照片
var time = 0;//定时器跳转参数初始化
//封装一个清除active方法
var clearActive = function () {
for (i = 0; i < items.length; i++) {
items[i].className = 'item';
}
for (j = 0; j < points.length; j++) {
points[j].className = 'point';
}
}
//改变active方法
var goIndex = function () {
clearActive();
items[index].className = 'item active';
points[index].className = 'point active'
}
//左按钮事件
var goLeft = function () {
if (index == 0) {
index = 3;
} else {
index--;
}
goIndex();
}
//右按钮事件
var goRight = function () {
if (index < 3) {
index++;
} else {
index = 0;
}
goIndex();
}
//绑定点击事件监听
left.addEventListener('click', function () {
goLeft();
time = 0;//计时器跳转清零
})
right.addEventListener('click', function () {
goRight();
time = 0;//计时器跳转清零
})
//————————————————————————————————————————————————————————————————————————————————
//点击小圆点也能实现跟点击左右按钮一样的效果，不过这个不是index的加加减减
//而是直接指定某index对应的确定的某张图片
for(i = 0;i < points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
goIndex();
time = 0;//计时器跳转清零
})
}
//计时器轮播效果
//定义timer变量 就是这个控制自动轮播的计时器，后续给这个timer绑定上计时器（用一个play函数包起来）
var timer;
function play(){
timer = setInterval(() => {
time ++;
if(time == 20 ){
goRight();
time = 0;
}
},100)
}
play();
//移入清除计时器
//也就是当鼠标在图上的时候，图片不自动轮播，停在这一页
all.onmousemove = function(){
clearInterval(timer)
}
//移出启动计时器
//当鼠标离开图上时，图片继续轮播
all.onmouseleave = function(){
play();
}
</script>
</body>
</html>
