js图片横排无限循环滚动

最新推荐文章于 2024-07-16 17:26:59 发布

林中明月间。

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量9.6k

点赞数 3

分类专栏： Js、Jq轮播图、切换

本文链接：https://blog.csdn.net/a772116804/article/details/80283025

版权

Js、Jq轮播图、切换专栏收录该内容

28 篇文章 1 订阅

订阅专栏

一个好的插件地址：http://www.superslide2.com/demo.html

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, 
user-scalable=no"/>
<style>
*{margin: 0;padding: 0;}
#div1{
	position: relative;border: 1px solid gray;
	width: 760px;
	margin: 20px auto;
	height: 160px;
	overflow: hidden;
}
#div1 ul{
	position: absolute;
	left: 0;
}
#div1 a{
	position: absolute;
	z-index: 2;
	text-decoration: none;
	top: 45%;
	display: none;
}
#div1 ul li{
	padding: 5px;
	list-style: none;
	width: 180px;
	height: 150px;
	float: left;
}
#div1 ul li img{
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		var oUl = oDiv.getElementsByTagName('ul')[0];
		var aLi = oUl.getElementsByTagName('li');
		var aA = oDiv.getElementsByTagName('a');
		var iSpeed = 1;//正左负右
		var timer = null;
		//计算ul的宽为所有li的宽的和;
		oUl.innerHTML += oUl.innerHTML+oUl.innerHTML;
		oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
		function Slider(){
			if (oUl.offsetLeft<-oUl.offsetWidth/2) {
				oUl.style.left = 0;
			}else if(oUl.offsetLeft>0){
				oUl.style.left =-oUl.offsetWidth/2+'px';
			}
			oUl.style.left = oUl.offsetLeft-iSpeed+'px';//正负为方向
		}
		timer =setInterval(Slider,30);
		aA[0].onclick = function(){
			iSpeed = 1; //控制速度的正负
		}
		aA[1].onclick = function(){
			iSpeed = -1;
		}
		oDiv.onmouseover = function(){
			clearInterval(timer);
		}
		oDiv.onmouseout = function(){
			timer =setInterval(Slider,30);
		}
	};
</script>
<div id="div1">
	<ul>
		<li><img src="img/2.jpg"></li>
		<li><img src="img/3.jpg"></li>
		<li><img src="img/4.jpg"></li>
		<li><img src="img/5.jpg"></li>
	</ul>
	<a href="javascript:;" style="left:10px;"><</a>
	<a href="javascript:;" style="right:10px;">></a>
</div>
</body>
</html>

林中明月间。

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
js图片横排无限循环滚动

一个好的插件地址：http://www.superslide2.com/demo.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://w...
复制链接

扫一扫