jq 超级简单自动轮播图

最新推荐文章于 2022-06-20 21:03:47 发布

weixin_34050005

最新推荐文章于 2022-06-20 21:03:47 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5294168.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin:0; padding:0;}
	.outer{width:800px; height:400px; overflow:hidden; margin:0 auto;}
	.inner{width:3200px; height:400px; position:relative;}
	.inner ul{ position:absolute; left:0; top: 0;}
	.inner ul li{ float:left;}
	.inner ul li img{ width:800px; height:400px;}
	</style>

	<script src="jquery-2.2.2.min.js"></script>
	<script>
	$(function(){
		var num = -800;//向左走  每次定时器加这个值
		setInterval(function(){
			var num1 = $(".inner > ul").position().left + num;
			if(num1 == -3200)
			{
				num1 = 0;
			}
			$(".inner > ul").animate({"left":num1},500)
		}, 2000)
		
	
	})
		
	</script>
</head>
<body>
	<div class="outer">
		<div class="inner">
			<ul>
				
				<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292323.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292325.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292326.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li><!--添加了一张图-->
			</ul>
		</div>
	</div>
	<div class="lll"></div>
</body>
</html>

　　主要思想当图片不断的减减走到第4张的时候，还要向后面走，再走就没有了，所以在最后面一张添加了第一张图，这个时候开始位置-2400 判断如果到-2400第4张的时候，让left等于0也就是开始位置

转载于:https://www.cnblogs.com/mingjixiaohui/p/5294168.html