大致的布局如下:
<div class="banner" >
<div class="pic">
<ul>
<li><img src="img/banner4.jpg" /></li>
<li><img src="img/banner1.png" /></li>
<li><img src="img/banner2.png" /></li>
<li><img src="img/banner3.jpg" /></li>
<li><img src="img/banner4.jpg" /></li>
<li><img src="img/banner1.png" /></li>
</ul>
</div>
<!--点播列表-->
<div class="tab">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--banner 两边的按钮-->
<div class="btn">
<div id="left"> < </div>
<div id="right"> > </div>
</div>
</div>
css样式如下:
.banner{width:100%;height:400px;position:relative;}
.banner .pic{width: 100%;height: 100%;overflow: hidden;}
.banner .pic ul{width: 1000%;height: 100%;margin-left: -100%;}
.banner .pic ul li{width: 10%;height: 100%;float: left;}
.banner .pic ul li img{width: 100%;height: 100%;}
.banner .tab{width: 136px;height: 3px;position: absolute;bottom: 20px;left: 50%;margin-left: -68px;}
.banner .tab ul li{width: 30px;height: 3px;float: left;margin: 0 2px;background: #5D5C60;}
.banner .tab ul li.on{background: #0DA1A4;}
.banner .btn div{width: 30px;height: 40px;background: rgba(0, 0, 0, 0.5);font-size:20px;text-align: center;line-height: 40px;color: #fff;position: absolute;top: 50%;margin-top: -20px;display: none;}
#left{left: 15px;}
#right{right: 15px;}
JS代码:
~function(){
var banner = $(‘.banner‘);
var picUl = $(‘.banner .pic ul‘);
var tabLi = $(‘.banner .tab ul li‘);
var btnDiv = $(‘.banner .btn div‘);
var width = banner.width();
var index = 0;
var timer = null;
var nowTime = 0;
//底部Li列表添加on样式
tabLi.eq(0).addClass(‘on‘);
setAuto();
tabLi.click(function(){
index = $(this).index();
tabLi.eq(index).addClass(‘on‘).siblings().removeClass(‘on‘);
picUl.stop().animate({
marginLeft:-width*(index+1)+‘px‘
},1000);
});
btnDiv.click(function(){
if (new Date() - nowTime >500) {
nowTime = new Date();
var i = $(this).index();
i?index++:index--;
change();
}
});
function setAuto(){
timer = setInterval(function(){
index++;
change();
},5000);
};
banner.hover(function(){
btnDiv.show(1000);
clearInterval(timer);
},setAuto).mouseleave(function(){
btnDiv.hide(1000);
});
function change(){
index >= tabLi.length?tabLi.eq(0).addClass(‘on‘).siblings().removeClass(‘on‘):tabLi.eq(index).addClass(‘on‘).siblings().removeClass(‘on‘);
picUl.stop().animate({
marginLeft:-width*(index+1)+‘px‘
},1000,function(){
if (index==4) {
index = 0;
picUl.css("marginLeft",-width+‘px‘);
} else if(index == -1){
index = tabLi.length - 1;
picUl.css("marginLeft",-width*(index+1)+‘px‘);
}
});
}
}();
作为一个新手,用两天时间调试的banner图,感觉还是可以的~_~~_~
原文地址:https://www.cnblogs.com/duxingdexin/p/8969178.html