<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding:0;}
#div1 ul li{float: left;width:200px;height:200px;list-style: none;}
#div1 img{width:200px;height:200px;}
#div1{width:800px;height:200px;margin: 100px auto;position: relative;background-color: red;overflow: hidden;}
#div1 ul{position: absolute;top:0;left: 0;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0]; //获取oDiv下的第一个ul
var aLi=oUl.getElementsByTagName('li');
var speed=2; //定义一个全局变量
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //让那个ul里面的东西乘2
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';
}
var timer=setInterval(move,30);
oDiv.onmouseover=function()
{
clearInterval(timer);
};
oDiv.onmouseout=function()
{
timer=setInterval(move,30);
};
document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function()
{
speed=2;
};
};
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="./无缝滚动图片/1.jpg /"></li>
<li><img src="./无缝滚动图片/2.jpg /"></li>
<li><img src="./无缝滚动图片/3.jpg /"></li>
<li><img src="./无缝滚动图片/4.jpg /"></li>
</ul>
</div>
</body>
</html>
js的无缝滚动
猜你喜欢
转载自blog.csdn.net/qq_45862302/article/details/105728014
今日推荐
周排行