js大图匀速无缝滚动效果

最新推荐文章于 2023-07-31 11:31:49 发布

thirdshore

最新推荐文章于 2023-07-31 11:31:49 发布

阅读量339

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/thirdshore/article/details/50131791

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

thirdshore

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js大图匀速无缝滚动效果

无缝滚动*{margin:0;padding: 0;}#box{width: 500px;height: 350px;margin:20px auto;overflow: auto;}#inner{width: 2500px;height: 350px;}#inner img{float: left;}button{wid
复制链接

扫一扫

专栏目录