<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{margin:0;padding: 0;}
#box{
width: 500px;
height: 350px;
margin:20px auto;
overflow: auto;
}
#inner{
width: 2500px;
height: 350px;
}
#inner img{
float: left;
}
button{
width: 60px;
height: 30px;
}
</style>
</head>
<body>
<div id="box">
<div id="inner">
<img src="p1.jpg" alt="">
<img src="p2.png" alt="">
<img src="p3.jpg" alt="">
<img src="p4.jpg" alt="">
<img src="p1.jpg" alt="">
</div>
</div>
<button>left</button><button>right</button>
<script>
var oBox = document.getElementById("box");
var oBtn = document.getElementsByTagName('button');
var time;
var speed;
// oBtn[0].onclick = function(){ //点击按钮left 图片向左移动
// clearInterval(time);
// time=setInterval(function(){
// oBox.scrollLeft +=1;
// if (oBox.scrollLeft==2000) {
// oBox.scrollLeft=0;
// };
// },1)
// }
// oBtn[1].onclick = function(){ //点击按钮right 图片向右移动
// clearInterval(time);
// time=setInterval(function(){
// oBox.scrollLeft -=1;
// if (oBox.scrollLeft==0) {
// oBox.scrollLeft=2000
// };
// },1)
// }
function move(max,min){
clearInterval(time)
time=setInterval(function(){
oBox.scrollLeft+=speed;
if (oBox.scrollLeft==max) {
oBox.scrollLeft=min
};
if (oBox.scrollLeft%500==0) {
clearInterval(time)
setTimeout(function(){
if (speed==1) {
move(2000,0)
}else{move(0,2000)}
},500)
};
},1)
}
oBtn[0].onclick = function(){
speed=1
move(2000,0)
}
oBtn[1].onclick = function(){
speed=-1
move(0,2000)
}
oBox.onmouseover = function(){
clearInterval(time);
}
oBox.onmouseout = function(){
if (speed==1) {
move(2000,0)
}else{
move(0,2000)
}
}
</script>
</body>
</html>
js大图匀速无缝滚动效果
最新推荐文章于 2023-07-31 11:31:49 发布