简单图片无缝滚动的实现

来源：互联网发布：淘宝商城服装质检报告编辑：程序博客网时间：2024/06/01 08:36

图片轮播相信是很多学习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.onclick=function(){
speed=-2;
}
btn2.onclick=function(){
speed=2;
}
div1.onmouseover=function(){
clearInterval(timer);
}
div1.onmouseout=function(){
timer=setInterval(move,30);
}
timer=setInterval(move,30);
</script>
</body>
</html>

个人感觉这个demo需要注意的地方有下面几个：

1.要给父div设置一个position：relative，给子ul设置一个position：absolute

2.x.style.left是可以进行读写操作的，x.offsetLeft则只能读，不能写，而且前者是带有单位“px”的，后者是不带有单位的

3.记得鼠标移入移出的时候要清除之前的计时器，否则会越来越快

4.顺便说一下document.getElementsByTagName("ul")获取的是一个集合，因此后面加上[0]表示取到第一个，因为小demo中就只有一个ul，所以就取到它了

另外，要是还想加上一个个小圆点，用于停留查看的的话也一样，增加一些样式，给锚点就可以了。

0 0