左右轮播无缝效果

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gxywb/p/9413897.html

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="fk.css" rel="stylesheet" type="text/css" />
		<script src="../1.10.2.jquery.min.js"></script>
	</head>
	<body>
		<div id="flash">
			<!--img[src=img/$.jpg]*6-->
			<div class="pic_box">
			<img src="img/1.jpg" alt="" />
			<img src="img/2.jpg" alt="" />
			<img src="img/3.jpg" alt="" />
			<img src="img/4.jpg" alt="" />
			<img src="img/1.jpg" alt="" />
			</div>
			<ul>
				<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
	<script>
		var c=0;
	setInterval(function(){
		c++;
		if(c==5){
			$("#flash .pic_box").css('left','0');
			c=1;
		}
//		计算大块的left值
		var l=c*-473;
//		让大块移动到对应的left值上
		$("#flash .pic_box").animate({'left':l},300);
		if(c==4){
			$("#flash ul li").eq(0).css('background','#7abd54').siblings('li').css('background','#999');
		}
//		让c号li变绿,兄弟li变灰
		$("#flash ul li").eq(c).css('background','#7abd54').siblings('li').css('background','#999');
	},1000);
	</script>
</html>

css代码

*{
	margin: 0;
	padding: 0;
}
#flash{
	width: 473px;
	height: 180px;
	border: 5px solid blue;
	margin: 20px auto;
	position: relative;
	overflow: hidden;
}
#flash .pic_box{
	width: 2365px;
	height: 190px;
	position: absolute;
	left: 0;
	top: 0;
}
#flash .pic_box img{
	float: left;
	width: 473px;
	height: 180px;
}
#flash ul li{
	list-style: none;
	width: 36px;
	height: 5px;
	background: #999;
	float: left;
	margin-right: 2px;
}
#flash ul{
	position: absolute;
	left: 161px;
	top: 169px;
}
#flash ul li.cur{
	background: #7abd54;
}

转载于:https://www.cnblogs.com/gxywb/p/9413897.html