Banner_仿《蚂蜂窝》首页的Banner

摘要：微软雅黑唯有旅行与美食，不负时光印度尼西亚我的人生伏笔，从东爪哇到巴厘岛天地山水，超你所愿附天加拿大自驾指南锦州天暴食顿，这是一座来了没时间观光的城市澳之秘境，倾翻的浪漫盐池西澳南澳自驾笔记

html

    

        

            

                
                    
                    

                        
11/Dec.2017
                        
唯有旅行与美食，不负时光
                    
                
            
            

                
                    
                    

                        
11/Dec.2017
                        
印度尼西亚︱我的人生伏笔，从东爪哇到巴厘岛
                    
                
            
            

                
                    
                    

                        
11/Dec.2017
                        
天地山水，超你所愿（附12天加拿大自驾指南）
                    
                
            
            

                
                    
                    

                        
11/Dec.2017
                        
锦州 | 2天暴食13顿，这是一座来了没时间观光的城市！
                    
                
            
            

                
                    
                    

                        
11/Dec.2017
                        
澳之秘境，倾翻的浪漫盐池——西澳南澳自驾笔记
                    
                
            
        
    
    

        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
    

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