html
<style>
*{
margin: 0;
padding: 0;
font-family: 微软雅黑;
}
html,body{
width: 100%;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.container{
min-width: 1000px;
position: relative;
}
</style>
<div class="banner_container">
<div class="container">
<ul id="banner-box">
<li style="z-index: 3;opacity: 1;">
<a href="">
<img src="https://c1-q.mafengwo.net/s10/M00/15/C4/wKgBZ1ozI5eAPOdLAAdFSkm06GE36.jpeg?imageMogr2%2Finterlace%2F1" alt="">
<div class="text-box">
<p><span>11</span>/Dec.2017</p>
<h2>唯有旅行与美食,不负时光</h2>
</div>
</a>
</li>
<li style="z-index: 1;opacity: 1;">
<a href="">
<img src="https://c4-q.mafengwo.net/s10/M00/30/0F/wKgBZ1oxza6ADJVMAAeu0DJw-sk45.jpeg?imageMogr2%2Finterlace%2F1" alt="">
<div class="text-box">
<p><span>11</span>/Dec.2017</p>
<h2>印度尼西亚︱我的人生伏笔,从东爪哇到巴厘岛</h2>
</div>
</a>
</li>
<li style="z-index: 1;opacity: 1;">
<a href="">
<img src="https://n1-q.mafengwo.net/s10/M00/AB/1D/wKgBZ1ovtGyAamesAAlc0W6PwZc28.jpeg?imageMogr2%2Finterlace%2F1" alt="">
<div class="text-box">
<p><span>11</span>/Dec.2017</p>
<h2>天地山水,超你所愿(附12天加拿大自驾指南)</h2>
</div>
</a>
</li>
<li style="z-index: 1;opacity: 1;">
<a href="">
<img src="https://c3-q.mafengwo.net/s10/M00/0E/42/wKgBZ1oucouAA_mrAAgjGaZB37052.jpeg?imageMogr2%2Finterlace%2F1" alt="">
<div class="text-box">
<p><span>11</span>/Dec.2017</p>
<h2>锦州 | 2天暴食13顿,这是一座来了没时间观光的城市!</h2>
</div>
</a>
</li>
<li style="z-index: 1;opacity: 1;">
<a href="">
<img src="https://b4-q.mafengwo.net/s10/M00/F6/6E/wKgBZ1os2xqAXvAlAAyDUu2n-4Y32.jpeg?imageMogr2%2Finterlace%2F1" alt="">
<div class="text-box">
<p><span>11</span>/Dec.2017</p>
<h2>澳之秘境,倾翻的浪漫盐池——西澳南澳自驾笔记</h2>
</div>
</a>
</li>
</ul>
</div>
<ul id="banner-index-box" class="banner-index-box">
<li class="banner-index-active">
<img src="https://b3-q.mafengwo.net/s10/M00/D1/E5/wKgBZ1oyYCOAC1IEAAW2-dTwrds90.jpeg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="">
<span></span>
</li>
<li>
<img src="https://c2-q.mafengwo.net/s10/M00/F2/A6/wKgBZ1oxCe-Acl7VAARyO-z01Lo91.jpeg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="">
<span></span>
</li>
<li>
<img src="https://n2-q.mafengwo.net/s10/M00/AB/16/wKgBZ1ovtGSAdIp9AARjNzLjUV493.jpeg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="">
<span></span>
</li>
<li>
<img src="https://p2-q.mafengwo.net/s10/M00/0E/32/wKgBZ1oucoCATKDFAAPHxEmZETg29.jpeg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="">
<span></span>
</li>
<li>
<img src="https://b4-q.mafengwo.net/s10/M00/F6/6B/wKgBZ1os2xCARL0EAAZLrHPlIRY86.jpeg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="">
<span></span>
</li>
</ul>
</div>
css
.banner_container {
width: 100%;
position: relative;
min-width: 1000px;
}
.banner_container .container {
width: 100%;
height: 100%;
position: relative;
}
.banner_container .container ul {
width: 100%;
height: 100%;
display: block;
position: relative;
overflow: hidden;
}
.banner_container .container ul li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
}
.banner_container .container ul li img {
width: 100%;
display: block;
}
.banner_container .container ul li .text-box {
width: 1000px;
position: absolute;
top: 25px;
left: 50%;
margin-left: -500px;
}
.banner_container .container ul li .text-box p {
color: #fff;
font-size: 24px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.banner_container .container ul li .text-box p span {
font-size: 38px;
}
.banner_container .container ul li .text-box h2 {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
font-size: 26px;
font-weight: normal;
}
.banner_container .container ul .banner-tran {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.banner_container .banner-index-box {
width: 110px;
height: 340px;
position: absolute;
z-index: 10;
top: 50%;
margin-top: -175px;
right: 40px;
}
.banner_container .banner-index-box li {
width: 110px;
height: 62px;
position: relative;
margin-bottom: 6px;
}
.banner_container .banner-index-box li a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.banner_container .banner-index-box li img {
width: 100%;
height: 100%;
z-index: 11;
position: relative;
display: block;
border-radius: 3px;
}
.banner_container .banner-index-box li span {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid transparent;
z-index: 12;
cursor: pointer;
border-radius: 3px;
}
.banner_container .banner-index-box .banner-index-active span {
border: 2px solid #ff9d00;
}
js
//t代表banner切换的时间间隔;int代表banner渐变的时长;auto代表banner是否自动播放
function Banner(_t,_int,_auto) {
this.bannerContainer = null;
this.bannerBox = null;
this.allBannerItem = null;
this.bannerIndexBox = null;
this.allBannerIndexItem = null;
this.bannerInt = null;
this.index = 0;
this._t = _t;
this._int =_int;
this._auto = _auto;
this.canChange = true;
}
Banner.prototype={
constructor:Banner,
getElement:function () {
this.bannerContainer = document.getElementsByClassName("banner_container")[0];
this.bannerBox = document.getElementById("banner-box");
this.allBannerItem = this.bannerBox.getElementsByTagName("li");
this.bannerIndexBox = document.getElementById("banner-index-box");
this.allBannerIndexItem = this.bannerIndexBox.getElementsByTagName("li");
},
bannerInit:function () {
this.getElement();
this.bannerWidthInit();
(this._auto)&&(this.bannerAutoPlay());
this.bannerIndexClick();
},
bannerWidthInit:function () {
var that = this;
that.setBannerWidth();
window.onresize = function () {
that.setBannerWidth();
};
},
setBannerWidth:function () {
var windowW = document.documentElement.clientWidth;
if(windowW<1000){
this.bannerContainer.style.height = 1000/3+"px";
}else {
this.bannerContainer.style.height = windowW/3+"px";
}
},
bannerChange:function (index,nextIndex) {
var that = this;
if(that.canChange){
that.canChange = false;
var item = that.allBannerItem;
item[nextIndex].style.zIndex = "2";
item[index].className += " banner-tran";
item[index].style.opacity = "0";
setTimeout(function () {
item[nextIndex].style.zIndex = "3";
item[index].style.zIndex = "1";
item[index].className = item[index].className.replace(/\sbanner-tran/,"");
item[index].style.opacity = "1";
that.index = nextIndex;
that.canChange = true;
},that._int);
}
},
bannerAutoPlay:function () {
var that = this;
that.bannerInt = setInterval(function () {
var nextIndex = that.index+1===that.allBannerItem.length?0:that.index+1;
that.allBannerIndexItem[that.index].className = "";
that.allBannerIndexItem[nextIndex].className = "banner-index-active";
that.bannerChange(that.index,nextIndex);
},that._t);
},
bannerIndexClick:function () {
var that = this;
var item = that.allBannerIndexItem;
for(var i=0;i<item.length;i++){
item[i].index = i;
item[i].addEventListener("click",function () {
if(this.className.indexOf("banner-index-active")===-1&&that.canChange){
clearInterval(that.bannerInt);
(that._auto)&&(that.bannerAutoPlay());
document.getElementsByClassName("banner-index-active")[0].className = "";
this.className = "banner-index-active";
that.bannerChange(that.index,this.index);
}
})
}
}
};
var banner = new Banner(6000,500,true);
banner.bannerInit();