1.先把标签写好
<div class="wrap">
<div class="wrapDiv">
<img class="photo" src="1.png">
<img class="photo" src="2.png">
<img class="photo" src="3.png">
</div>
<div class="tabs" id="photoTabs">
<a class="tab" href="javascript:;"></a>
<a class="tab" href="javascript:;"></a>
<a class="tab" href="javascript:;"></a>
</div>
</div>
2.写样式
.wrap {
width: 1000px;
height: 200px;
position: relative;
overflow: hidden;
}
.wrap .wrapDiv{
width:100%;
}
.wrap .photo{
display: block;
width: inherit;
position: absolute;
top: 0;
left: 0;
}
.wrap .tabs {
width: 100%;
position: absolute;
bottom: 20px;
text-align: center;
}
.wrap .tab {
display: inline-block;
width: 8px;
height: 8px;
background: #f5f5f5;
border-radius: 50%;
margin: 0 3px;
}
.wrap .tab.current {
background: #f00;
}
3.最后加上js
function roll() {
var i = 0,
timer,
$photo = $(".wrapDiv .photo");
//设置滚动banner的效果 begin
$(".wrap .wrapDiv .photo").eq(0).show().siblings().hide();
rollBannerOprate();
$(".wrap .tabs .tab").hover(function() {
i = $(this).index();
clearInterval(timer);
rollBannerStart();
}, function() {
rollBannerOprate();
});
//设置滚动banner的显示
function rollBannerStart() {
$photo.eq(i).fadeIn(500).siblings().fadeOut(500);
$(".tabs .tab").eq(i).addClass("current").siblings().removeClass("current");
}
//设置滚动banner的时间控制
function rollBannerOprate() {
timer = setInterval(function() {
i++;
if(i == $photo.length) {
i = 0;
}
rollBannerStart();
}, 5000);
}
}
roll();
完成啦!