简单图片无缝滚动的实现

最新推荐文章于 2022-05-12 21:48:18 发布

闪现A小兵

最新推荐文章于 2022-05-12 21:48:18 发布

阅读量501

点赞数

分类专栏： js常见效果图文章标签：无缝滚动 web前端 js常见效果

本文链接：https://blog.csdn.net/moguzhale/article/details/53317201

版权

js常见效果图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片轮播相信是很多学习js的人都做过的一个demo，今天我就来放一个简易的图片轮播，无缝滚动的小demo;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
ul,li{
margin: 0;
padding: 0;
}
li{
list-style-type:none;
float:left;
width: 200px;
height: 150px;
}
ul{
position: absolute;
top: 0;
left: 0;
}
#div1{
width: 800px;
height: 150px;
background: #f00;
position: relative;
margin: 100px auto;
overflow: hidden;
}

</style>
</head>
<body>
<button id="btn1">left</button>
<button id="btn2">right</button>
<div id="div1">
<ul>
<li><img src="img1/1.jpg" alt=""></li>
<li><img src="img1/2.jpg" alt=""></li>
<li><img src="img1/3.jpg" alt=""></li>
<li><img src="img1/4.jpg" alt=""></li>
</ul>
</div>
<script>
var div1=document.getElementById("div1");
var oUl=document.getElementsByTagName("ul")[0];
var aLi=document.getElementsByTagName("li");
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var timer;
var speed=-2;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left="0"; //向左滚动的时候，拉回来
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+"px"; //向右滚动的时候，拉回来
}
oUl.style.left=oUl.offsetLeft+speed+"px";
}
btn1.οnclick=function(){
speed=-2;
}
btn2.οnclick=function(){
speed=2;
}
div1.οnmοuseοver=function(){
clearInterval(timer);
}
div1.οnmοuseοut=function(){
timer=setInterval(move,30);
}
timer=setInterval(move,30);
</script>
</body>
</html>