html
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