左右轮播无缝效果
<!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;
}
