Banner_仿《螞蜂窩》首頁的Banner

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();