<div class="banner">
<ul class="slide_ul">
<li>
<a href="#">
<img src="images/pc5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/pc1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/pc2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/pc3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/pc4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/pc5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/pc1.jpg" alt="">
</a>
</li>
</ul>
</div>
/*无缝滑动轮播--start*/
.banner{
width:6.4rem;
height:3.12rem;
position:relative; /*给ul做定位用*/
overflow:hidden;
}
/*banner img*/
.slide_ul{
position:absolute;
left:-6.4rem;
width:44.8rem; /*增加图片重新修正width*/
height:3.12rem;
}
.slide_ul li{
display:block;
float:left;
width:6.4rem;
height:3.12rem;
}
.slide_ul img{
display:block;
width:6.4rem;
height:3.12rem;
}
.js
// 摆放顺序 5123451 方便左右不同方向轮播
var index=1 ;
function auto(){
index++;
$(".slide_ul").animate({"left":-6.4*index+"rem"},500,
//轮播转换一张用时
function(){
if(index===6){ //6=总添加照片张数-1
$(".slide_ul").css("left","-6.4rem");
index=1;
}
}
)
}
//每三秒轮播一次
timer=setInterval("auto()",3000);