旗帜_模仿《蚂蜂窝》首页Banner
时间：2023-03-31 12:16:27
CSS
11/Dec.2017
印度尼西亚｜我人生的伏笔，从东爪哇到巴厘岛
11/2017年12月
天堂，人间，风景，超乎你的想象（附12天加拿大自驾攻略）
11/Dec.2017
锦州|2天暴饮暴食13餐，这是一座来不及逛的城市！
11/Dec.2017
澳洲的秘密，翻倒的浪漫盐池——西澳南澳自驾笔记
<span>css.banner_container{宽度：100%；位置：相对；最小宽度：1000像素；}.banner_container.container{宽度：100%；高度：100%；位置：相对；}.banner_container.containerul{宽度：100%；高度：100%；显示：块；位置：相对；溢出：隐藏；}.banner_container.containerulli{宽度：100%；高度：100%;位置：绝对；左：0；右：0；}.banner_container.containerulliimg{宽度：100%；显示：块；}.banner_container.containerulli.text-box{宽度：1000px；位置：绝对；顶部：25px；左：50%；margin-left:-500px;}.banner_container.containerulli.text-boxp{color:#fff;字体大小：24px；文本阴影：01px3pxrgba(0,0,0,0.9);}.banner_container.containerulli.text-boxpspan{font-size:38px;}.banner_container.containerulli.text-boxh2{颜色：#fff;文字阴影：01px3pxrgba(0,0,0,0.9);字体大小：26px；字体粗细：正常；}.banner_container.containerul.banner-tran{-webkit-backface-visibility:hidden;-moz-backface-visibility：隐藏；-ms-backface-可见性：隐藏；背面可见性：隐藏；-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-变换：translateZ(0)；转换：translateZ(0)；-webkit-过渡：全部；特拉任务：全部；-webkit-transition-timing-function：线性；转换时间函数：线性；-webkit-transition-duration:.5s;transition-duration:.5s;}.banner_container.banner-index-box{width:110px;高度：340px；位置：绝对；z-指数：10；顶部：50%；边距顶部：-175px；右：40px;}.banner_container.banner-index-boxli{宽度：110px;高度：62px；位置：相对；margin-bottom:6px;}.banner_container.banner-index-boxlia{position:relative;显示：块；宽度：100%；高度：100%；}.banner_container.banner-index-boxliimg{宽度：100%；高度：100%；z-指数：11；位置：相对；显示：块；border-radius:3px;}.banner_container.banner-index-boxlispan{display:block;宽度：100%；高度：100%；位置：绝对；顶部：0；左：0；框大小：边框框；边框：2px实心透明；z-指数：12；游标：指针；border-radius:3px;}.banner_container.banner-index-box.banner-index-activespan{border:2pxsolid#ff9d00;}js//t代表banner切换的时间间隔；int代表banner渐变的时间长；auto代表banner是否自动播放函数Banner(_t,_int,_auto){this.bannerContainer=null;this.bannerBox=null;this.allBannerItem=null;this.bannerIndexBox=null;this.allBannerIndexItem=null;this.bannerInt=null;这个.index=0;这个._t=_t;这个._int=_int;这个._auto=_auto;this.canChange=true;}Banner.prototype={constructor:Banner,getElement:function(){this.bannerContainer=document.getElementsByClassName("banner_container")[0];}this.bannerBox=document.getElementById("横幅框");this.allBannerItem=this.bannerBox.getElementsByTagName("li");this.bannerIndexBox=document.getElementById("banner-index-box");this.allBannerIndexItem=this.bannerIndexBox.getElementsByTagName("li");},bannerInit:function(){this.getElement();这个.bannerWidthInit()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(){varthat=this;that.bannerInt=setInterval(function(){varnextIndex=that.index+1===that.allBannerItem.length?0:that.index+1;that.allBannerIndexItem[that.index].className="";那.allBannerIndexItem[nextIndex].className="banner-index-active";that.bannerChange(that.index,nextIndex);},that._t);},bannerIndexClick:function(){varthat=this;varitem=that.allBannerIndexItem;for(vari=0;i
