<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
}
#box {
width: 600px;
height: 400px;
border: 3px solid #43CACA;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#box1 {
width: 3600px;
font-size: 0px;
position: relative;
left: 0px;
}
img {
width: 600px;
height: 400px;
display: inline-block;
}
#box2 {
width: 169px;
/* border: #43CACA 1px solid; */
position: absolute;
left: 231px;
top: 367px;
text-align: center;
}
.point {
width: 20px;
height: 20px;
background-color: #43CACA;
border-radius: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box">
<div id="box1">
<img src="./img/1.JPG">
<img src="./img/2.JPG">
<img src="./img/3.JPG">
<img src="./img/4.JPG">
<img src="./img/5.JPG">
</div>
<div id="box2">
<div onclick="move(0)" class="point"></div>
<div onclick="move(1)" class="point"></div>
<div onclick="move(2)" class="point"></div>
<div onclick="move(3)" class="point"></div>
<div onclick="move(4)" class="point"></div>
</div>
</div>
</body>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var curx = 0; //定义图片便宜量
var si; //定义计时器变量,变量这里定义的目的是为,如果说上一次的点击事件还没有执行完,点击了新的事件之后就可以清除掉,如果说定义到函数的内部的话,不能做到每次点击的时候清除计时器
var pointList = document.getElementsByClassName("point");//获得所有的按钮
pointList[0].style.backgroundColor = "whitesmoke";//默认将第一个按钮设置为白色
//定义按钮点击执行的事件函数
function move(index) {
//循环判断按钮,将非点击时间中的还原为默认颜色
for (var i = 0; i < pointList.length; i++) {
if (i == index) {
pointList[index].style.backgroundColor = "whitesmoke";
}else{
pointList[i].style.backgroundColor = "#43CACA";
}
}
//只要点击了新得按钮,就将上一次得按钮给终结掉
clearInterval(si);
console.log(si);
si = setInterval(function() {
//给图片向左的判断,每次减5直到向左等于目标的就不在进行判断
if (curx > -index * 600) {
curx -= 5;
box1.style.left = curx + "px";
}
//给图片向右的判断,每次加5直到向左等于目标的就不在进行判断
if (curx < -index * 600) {
curx += 5;
box1.style.left = curx + "px";
}
//当达到目标位置时,清除即计时器,这里从页面角度来说写也不影响,但是实际上程序还在一直进行,所以需要清除计时器
if (curx == -index * 600) {
clearInterval(si);
}
}, 1)
}
var autoNum = 1; //默认显示的是第一张图片,所以在执行move()时,只需从第二张图片开始,给下标参数1即为第2张图片
setInterval(function() {
//当自增5时,将参数改为0,又从第一张开始,但这里有个问题,从最后一张到第一张图片需要的时间为(3000/5)/1 = 600毫秒 当时自动轮播的时间为3000毫秒,那么第一张图片的停留时间实际只有3000-600,其他图片的停留时间为3000-600/5
if (autoNum == 5) {
autoNum = 0;
}
move(autoNum++);
}, 3000)
</script>
</html>
JS轮播图
最新推荐文章于 2024-09-09 09:35:48 发布