本文實例使用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開始滾動下一張，具體內容請大家參考代碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。