无缝滚动

最新推荐文章于 2022-10-16 11:45:00 发布

woaijianjiandandande

最新推荐文章于 2022-10-16 11:45:00 发布

阅读量316

点赞数

分类专栏： JavaScript 文章标签：无缝滚动

本文链接：https://blog.csdn.net/woaijianjiandandande/article/details/52974172

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝滚动</title>
<style>
*{/*先统一清除掉内边距和外边距*/
	margin:0;
	padding:0;
	}
	
#div1{
	width:800px;/*800=200+200+200+200*/
	height:100px;/*图片的高度为100px*/
	margin:50px auto;/*让div这个东西跑到页面的中间去*/
	position:relative;/*然而，#div1 ul要配合设置成绝对定位*/
	background:blue;
	overflow:hidden;/*让每次只出现4张图？？？？*/
	}
#div1 ul{/*ul整体要动起来*/
	list-style-type:none;
	position:absolute;/*//整个ul设置成绝对定位是为了移动起来较为方便*/
	left:0;/*相对于所在的元素的left值*/
	top:0;
	}
#div1 ul li{
	float:left;/*保证所有图片在一行显示*/
	width:200px;/*//为了放东西方便*/
	height:100px;
	}		
</style>
<script>
	window.οnlοad=function(){
		var div1=document.getElementById("div1");
		var ul1=div1.getElementsByTagName("ul")[0];/*获取ul中的第0个元素*/
		ul1.innerHTML=ul1.innerHTML+ul1.innerHTML;/*innerHTML用于返回开始和结束之间的HTML*/
		var li1=ul1.getElementsByTagName('li');
		ul1.style.width=li1[0].offsetWidth*li1.length+'px';/*在这里设置ul的宽度*/
		
		/*以下几行代码的作用是：方便选择向左向右滚动，在这里还可以控制快慢问题*/
		var speed=2;
		document.getElementsByTagName("a")[0].οnclick=function(){/*设置向左移动*/
			speed=-2;
			}
		document.getElementsByTagName('a')[1].οnclick=function(){/*设置向右移动*/
			speed=2;
			}
		
		
		function move(){
						/*向左走的处理方法*/
						if(ul1.offsetLeft<-ul1.offsetWidth/2){
							ul1.style.left="0";/*让这8张图片从头开始滚动，实际上跳转了一下们，只不过肉眼看不出来*/
							}
						/*ul1.style.left=(ul1.offsetLeft-2)+'px';向左滚动*/
						/*向右走的处理方法*/
						if(ul1.offsetLeft>0)
						{
							ul1.style.left=-ul1.offsetWidth/2+'px';
						}
						ul1.style.left=ul1.offsetLeft+speed+'px';/*这里保证了图片是一直滚动着的*/
			}
		var timer=setInterval(move,30);//这里直接出现函数名就可以了。定时器在打开页面后，经过这一步，就重启了
		div1.οnmοuseοver=function(){
			clearInterval(timer);
			}
		div1.οnmοuseοut=function(){
			timer=setInterval(move,30);
			}	
		}

	
</script>

</head>

<body>
    <br /><br />
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
<div id="div1">
	<ul >
    	<li><img src="image2/1.jpg" /></li>
        <li><img src="image2/2.jpg" /></li>
        <li><img src="image2/3.jpg" /></li>
        <li><img src="image2/4.jpg" /></li>
    </ul>

</div>

</body>
</html>

woaijianjiandandande

关注

0
点赞
踩
0

收藏

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

无缝滚动*{/*先统一清除掉内边距和外边距*/ margin:0; padding:0; } #div1{ width:800px;/*800=200+200+200+200*/ height:100px;/*图片的高度为100px*/ margin:50px auto;/*让div这个东西跑到页面的中间去*/ position:relative;/*然而，#div1 ul要
复制链接

扫一扫