js实现按钮控制带有停顿效果的图片滚动
本文实例使用js实现带有停顿效果的图片滚动，受按钮控制，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>无缝滚动2</title>
<style>
#warp{
width:1250px;
height:300px;
overflow:hidden;
margin:100pxauto0;
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;
}
#warpimg{
float:left;
margin-right:10px;
width:200px;
height:300px;
}
.btn{
text-align:center;
margin-top:10px;
}
.btnbutton{
font-size:16px;
}
</style>
</head>
<body>
<divid="warp">
<divid="con">
<divid="box1">
<imgsrc="images/meinv1.jpg"alt="">
<imgsrc="images/meinv2.jpg"alt="">
<imgsrc="images/meinv3.jpg"alt="">
<imgsrc="images/meinv4.jpg"alt="">
<imgsrc="images/meinv5.jpg"alt="">
<imgsrc="images/meinv6.jpg"alt="">
</div>
<divid="box2"></div>
</div>
</div>
<divclass="btn">
<buttonid="scrollL"><<左滚</button>
<buttonid="scrollR">右滚>></button>
</div>
<script>
varwarp=document.getElementById('warp');
varcon=document.getElementById('con');
varbox1=document.getElementById('box1');
varbox2=document.getElementById('box2');
varimg=box1.getElementsByTagName('img')[0];
varscrollL=document.getElementById('scrollL');
varscrollR=document.getElementById('scrollR');
vartimer1=null,timer2=null,flage=1;
box2.innerHTML=box1.innerHTML;
max=box1.clientWidth;
imgmax=img.clientWidth+10;
functionscrollLeft(){
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)
}
functionscrollRight(){
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开始滚动下一张，具体内容请大家参考代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。