html
<div class="banner">
<ul id="banner_ul">
<li id="first"><img src="images/banner1.gif"/></li>
<li><img src="images/banner2.gif"/></li>
<li><img src="images/banner3.gif"/></li>
<li><img src="images/banner4.gif"/></li>
<li><img src="images/banner5.gif"/></li>
</ul>
<div class="shownav">
</div>
</div>
css
#banner_ul{
position: absolute;
list-style: none;
margin-left: 0;
}
#banner_ul li{
display: none;
margin-left: -40px;
}
#banner_ul li#first{
display: block;
}
.shownav {
position: relative;
top: 125px;
left: 380px;
width: 400px;
}
.shownav span {
display: inline-block;/*相当于display:block;和float:left;连用,而且使用vertical-align: bottom;有效*/
/*float:left;*/
margin-right:2px;
text-align: center;
cursor: pointer;
font-family: Arial;
cursor: pointer;
vertical-align: bottom;
}
.span{
width: 16px;
height:16px;
color:#ff7300;
background-color: #fff;
border: 1px solid #ff7300;
line-height: 16px;
font-size: 12px;
}
.highlight{
width: 21px;
height: 21px;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 21px;
color: #fff;
background-color: #ff7300;
}
jquery
//图片轮播
var $li=$("#banner_ul li");var li_num=$("#banner_ul li").length;
for(var i=1;i<li_num+1;i++){
$(".shownav").append("<span class='span'>"+i+"</span>");
}
$("span").eq(0).addClass("highlight");
//手动轮播
$(".span").mouseover(function(){
var span_num=$(this).html();
for(index=0;index<li_num;index++){
if(index==span_num-1){
$("#banner_ul li").eq(index).show();
$("span").eq(index).addClass("highlight").removeClass("span");
}else{
$("#banner_ul li").eq(index).hide();
$("span").eq(index).removeClass("highlight").addClass("span");
}
}
})
//自动轮播
var $li_now=$li.find(":visible");
var index=$li_now.index();
var time=setInterval(function(){
show(index+1);//解决了第一个和第二个的延时问题
index++;
if (index==li_num){
index=0;
}
},4000);
function show(index){//一定要传参
$li.eq(index).show().siblings($li).hide();
$(".shownav span").eq(index).addClass("highlight").siblings("span").removeClass("highlight").addClass("span");
}
$(".shownav span").hover(function(){
clearInterval(time);
$(this).addClass("highlight").siblings("span").removeClass("highlight").addClass("span");
},function(){
if($(this).index()==3){
index=0;
}
else{
index=$(this).index()-0+1;
}
time=setInterval(function(){
show(index);
index++;
if (index==li_num){
index=0;
}
},4000);
})