js实现按钮控制带有停顿效果的图片滚动
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要介绍了js实现按钮控制带有停顿效果的图片滚动，，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例使用js实现带有停顿效果的图片滚动，受按钮控制，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动2</title>
<style>
#warp{
width: 1250px;
height: 300px;
overflow: hidden;
margin:100px auto 0;
overflow-x: auto;
}
#warp #con{
width: 4000px;
height: 300px;
overflow: hidden;
}
#warp #con #box1{
float: left;
overflow: hidden;
}
#warp #con #box2{
float: left;
overflow: hidden;
}
#warp img{
float: left;
margin-right: 10px;
width: 200px;
height: 300px;
}
.btn{
text-align: center;
margin-top: 10px;
}
.btn button{
font-size: 16px;
}
</style>
</head>
<body>
<div id="warp">
<div id="con">
<div id="box1">
<img src="images/meinv1.jpg" alt="">
<img src="images/meinv2.jpg" alt="">
<img src="images/meinv3.jpg" alt="">
<img src="images/meinv4.jpg" alt="">
<img src="images/meinv5.jpg" alt="">
<img src="images/meinv6.jpg" alt="">
</div>
<div id="box2"></div>
</div>
</div>
<div class="btn">
<button id="scrollL"><<左滚</button>
<button id="scrollR">右滚>></button>
</div>
<script>
var warp=document.getElementById('warp');
var con=document.getElementById('con');
var box1=document.getElementById('box1');
var box2=document.getElementById('box2');
var img=box1.getElementsByTagName('img')[0];
var scrollL=document.getElementById('scrollL');
var scrollR=document.getElementById('scrollR');
var timer1=null,timer2=null,flage=1;
box2.innerHTML=box1.innerHTML;
max=box1.clientWidth;
imgmax=img.clientWidth+10;
function scrollLeft(){
flage=1;
clearInterval(timer1);
timer1=setInterval(function(){
warp.scrollLeft++;
if (warp.scrollLeft>=max) {
warp.scrollLeft=0;
}
if(warp.scrollLeft%imgmax==0){
clearInterval(timer1);
clearTimeout(timer2);
timer2=setTimeout(function(){
timer1=setInterval(scrollLeft,5)
},2000)
}
},5)
}
function scrollRight(){
flage=0;
clearInterval(timer1);
timer1=setInterval(function(){
warp.scrollLeft--;
if (warp.scrollLeft<=0) {
warp.scrollLeft=max;
}
if(warp.scrollLeft%imgmax==0){
clearInterval(timer1);
clearTimeout(timer2);
timer2=setTimeout(function(){
timer1=setInterval(scrollRight,5)
},2000)
}
},5)
}
scrollLeft();
scrollL.onclick=function(){
// clearInterval(timer1);
// clearTimeout(timer2);
scrollLeft();
}
scrollR.onclick=function(){
// clearInterval(timer1);
// clearTimeout(timer2);
scrollRight();
}
warp.onmouseenter=function(){
clearInterval(timer1);
clearTimeout(timer2);
}
warp.onmouseleave=function(){
clearInterval(timer1);
clearTimeout(timer2);
console.log(flage);
if (flage) {scrollLeft();}
else{scrollRight();}
}
</script>
</body>
</html>
这种效果的具体效果是鼠标移上去滚动停止，移出滚动，滚动时是一张一张图片的滚动，即滚动一张之后停2s开始滚动下一张，具体内容请大家参考代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。