js轮播图(点击图片切换 定时器效果)
Posted syf976561581
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js轮播图(点击图片切换 定时器效果)相关的知识，希望对你有一定的参考价值。
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换
不说别的直接上代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div.show{
width:600px;
height:400px;
border:2px solid red;
margin:0px auto;
overflow: hidden;
}
.btn{
text-align: center;
}
.btn button{
margin:10px 40px;
font-size: 32px;
}
.pic{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="show">
<img src="./images/01.jpg" class ="pic">
<!-- 自己图片的地址 -->
<img src="./images/640.jpg" class ="pic">
<img src="./images/02.jpg" class= "pic">
<img src="./images/03.jpg" class= "pic">
</div>
<div class="btn">
<button class="prev">上一页</button>
<button class="next">下一页</button>
</div>
<script type="text/javascript">
let setPic = [
// 将自己图片的地址存放到变量中
'./images/01.jpg',
'./images/640.jpg',
'./images/02.jpg',
'./images/03.jpg',
];
let time = (function(){
// 定时器句柄
let hTime;
function start(){
hTime = setInterval(function(){
showImg.src = setPic[ keyImg.inc() ];
},2000)
}
function stop(){
clearInterval(hTime);
}
return {start:start, stop:stop};
}())
// 围绕着下标 封装一个对象
let keyImg = (function(){
let i = 0; // 图片数组下标. 当前显示图片的下标
// 加1
function inc(){
i++;
if (i >= setPic.length) {
i = 0;
}
return i;
}
// 减1
function dec(){
i--;
if (i < 0) {
i = setPic.length-1;
}
return i;
}
return {inc:inc, dec:dec}
}())
// 每隔2秒显示下一张图片
let showImg = document.querySelector('.show img')
time.start();
// 上一张
let btnPrev = document.querySelector('.prev')
btnPrev.onclick = function(){
// 停止定时器
time.stop();
// 设置减1后的图片为当前图片
showImg.src = setPic[ keyImg.dec() ];
// 开启定时器
time.start();
}
// 下一张
let btnNext = document.querySelector('.next')
btnNext.onclick = function(){
// 停止定时器
time.stop();
// 设置当前要显示的图片
showImg.src = setPic[ keyImg.inc() ];
// 开启定时器
time.start();
}
</script>
</body>
</html>
这个就是轮播图效果了,如果文章对你有帮助,记得留下你的点赞加评论呦
以上是关于js轮播图(点击图片切换 定时器效果)的主要内容，如果未能解决你的问题，请参考以下文章