无缝轮播图 | 易学教程

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<!-- 网页文档三要素 -->
	<meta name="Keywords" content="">
	<meta name="description" content="">
	<title>无缝滚动</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#banner {
			height: 350px;
			width: 1120px;
			background-color: blue;
			overflow: hidden;
			margin: 0 auto;
			position: relative;/*相对定位，参考物*/
		}
		#banner ul.img {
			width: 8960px;
			margin-left: 0px;
		}
		#banner ul.img li {
			height: 350px;
			width: 1120px;
			list-style: none;
			float: left;
		}
		#banner ul.nav {
			position: absolute;
			bottom: 10px;/*距离参考物下边的距离*/
			width: 140px;
			left: 490px;/*距离参考物左端的距离*/
		}
		#banner ul.nav li {
			width: 10px;
			height: 10px;
			background: #333;
			float: left;
			margin: 3px;
			list-style: none;
		}
		#banner ul.nav li.curr {
			background: #ff0099;
		}
	</style>
</head>
<body>
	<div id="banner"> <!--id名是唯一的-->
		<ul class="img">
			<li style="background: blue;"></li>
			<li style="background: red;"></li>
			<li style="background: yellow;"></li>
			<li style="background: pink;"></li>
			<li style="background: white;"></li>
			<li style="background: black;"></li>
			<li style="background: green;"></li>
			<li style="background: #ccc;"></li>
		</ul>
		<ul class="nav">
			<li class="curr"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<script src="js/jquery-1.12.3.min.js"></script>
	<script>
		//alert($);
		var index = 0;//设置初始序列号；
		setInterval(function() {//定时器1秒钟之后再次调用动画
			index ++;
			if (index > 7) {
				index = 0;
			}
			// index %= 7;
			$("#banner ul.nav li").eq(index).addClass("curr").siblings().removeClass();
			//让图片从右往左就行滚动轮播
			$("#banner ul.img").animate({"margin-left": -1120*index + "px"},-1000);
		},1000);
	</script>
</body>
</html>
来源：https://www.cnblogs.com/handsomehan/p/5621852.html
标签
轮播