图片无缝滚动

最新推荐文章于 2022-05-17 19:47:08 发布

DarLing丶张皇

最新推荐文章于 2022-05-17 19:47:08 发布

阅读量82

点赞数

分类专栏： JS 文章标签： web H5 CSS3 Js

本文链接：https://blog.csdn.net/qq_42832885/article/details/83339093

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片无缝滚动JS教程

版权声明：本文为博主原创文章，未经博主允许不得转载。原创不易，希望大家尊重原创！
转载联系邮箱：1363119685@qq.com

页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js特效_图片无缝滚动</title>
		<link
			type="text/css"
			rel="stylesheet"
			media="all"
			href="css/mycss.css" />
		<script type="text/javascript" src="js/myjs.js" ></script>
	</head>
	<body>
		<!--横向无缝滚动-->
		<div id="p">
		<div id="parent">
			<div id="son1">
				<img src="img/wall_s1.jpg" />
				<img src="img/wall_s2.jpg" />
				<img src="img/wall_s3.jpg" />
				<img src="img/wall_s4.jpg" />
				<img src="img/wall_s5.jpg" />
				<img src="img/wall_s6.jpg" />
			</div>
			<div id="son2">
				<img src="img/wall_s1.jpg" />
				<img src="img/wall_s2.jpg" />
				<img src="img/wall_s3.jpg" />
				<img src="img/wall_s4.jpg" />
				<img src="img/wall_s5.jpg" />
				<img src="img/wall_s6.jpg" />
			</div>
		</div>
		</div>
	</body>
</html>

JavaScript：

/*横向无缝滚动*/
var lx;
//文档加载完成就开始轮循
window.onload=function(){

	lx=setInterval("sc()",100);
	
	var parent=document.getElementById("p");
	//鼠标移入执行
	parent.onmouseover=function(){
		clearInterval(lx);
	}
	//鼠标移除执行
	parent.onmouseout=function(){
		lx=setInterval("sc()",100);
	}
}
function sc(){
	//每次父元素的scrollTop+5
	var parent=document.getElementById("p");
	var son1=document.getElementById("son1");
	
	parent.scrollLeft+=5;
	
	//如果滚动条滚动高度大于第一块的高度，从0开始
	if(parent.scrollLeft>=son1.offsetWidth){
		parent.scrollLeft=0;
	}
}

DarLing丶张皇

关注

0
点赞
踩
0

收藏

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

图片无缝滚动JS教程版权声明：本文为博主原创文章，未经博主允许不得转载。原创不易，希望大家尊重原创！转载联系邮箱：1363119685@qq.com页面：&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
复制链接

扫一扫

专栏目录