JS的无缝滚动

最新推荐文章于 2021-07-15 10:21:02 发布

Azikou

最新推荐文章于 2021-07-15 10:21:02 发布

阅读量555

点赞数

本文链接：https://blog.csdn.net/u011909890/article/details/12107759

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>arguments</title>
<meta name="keyword" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
*{margin: 0;padding: 0}
#div1 {width:712px;height:108px;background-color: red;position: relative;margin: 200px auto;overflow: hidden;}
#div1 ul {position: absolute;left:0;}
#div1 ul li {float: left;width:178px;height: 108px;list-style: none;}

</style>

</head>
<body>
<div id="div1">
<ul id="ul1">
<li><img src="../../picture/img2/1.jpg"></li>
<li><img src="../../picture/img2/2.jpg"></li>
<li><img src="../../picture/img2/3.jpg"></li>
<li><img src="../../picture/img2/4.jpg"></li>
</ul>
</div>
<script type="text/javascript">
/*var div=document.getElementById('div1');
timer= setInterval(function () {
	
	 odiv.style.left=odiv.offsetLeft+10+'px';
	 odiv.style.top=odiv.offsetTop+10+'px';
if(parseInt(odiv.style.top)>=900||parseInt(odiv.style.left)>=900){
	clearInterval(timer)
}
},30);*/
var odiv=document.getElementById('div1');
var oul=document.getElementById('ul1');
var ali=oul.getElementsByTagName('li');
oul.innerHTML=oul.innerHTML+oul.innerHTML;
	   oul.style.width=ali[0].offsetWidth*ali.length+'px';
setInterval(function(){	 		
		if(oul.offsetLeft<-oul.offsetWidth/2){
			oul.style.left='0'
		}
		oul.style.left=oul.offsetLeft-2+'px';
        //if(oul.offsetLeft>-oul.offerstwidth/2)
},10)




</script>
</body>

</html>

Azikou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS的无缝滚动

arguments*{margin: 0;padding: 0}#div1 {width:712px;height:108px;background-color: red;position: relative;margin: 200px auto;overflow: hidden;}#div1 ul {position: absolute;left:0;}#div1 ul li {
复制链接

扫一扫

JS的无缝滚动

“相关推荐”对你有帮助么？