国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Banner_仿《螞蜂窩》首頁的Banner

tainzhi / 1230人閱讀

摘要：微軟雅黑唯有旅行與美食，不負時光印度尼西亞我的人生伏筆，從東爪哇到巴厘島天地山水，超你所愿附天加拿大自駕指南錦州天暴食頓，這是一座來了沒時間觀光的城市澳之秘境，傾翻的浪漫鹽池西澳南澳自駕筆記

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112895.html

相關文章

  • Banner_仿《螞蜂窩》首頁的Banner

    摘要：微軟雅黑唯有旅行與美食，不負時光印度尼西亞我的人生伏筆，從東爪哇到巴厘島天地山水，超你所愿附天加拿大自駕指南錦州天暴食頓，這是一座來了沒時間觀光的城市澳之秘境，傾翻的浪漫鹽池西澳南澳自駕筆記 showImg(https://segmentfault.com/img/bV0n2v?w=958&h=320); html *{ margin: 0; ...

    Cheng_Gang 評論0 收藏0

  • Banner_仿《螞蜂窩》首頁的Banner

    摘要：微軟雅黑唯有旅行與美食，不負時光印度尼西亞我的人生伏筆，從東爪哇到巴厘島天地山水，超你所愿附天加拿大自駕指南錦州天暴食頓，這是一座來了沒時間觀光的城市澳之秘境，傾翻的浪漫鹽池西澳南澳自駕筆記 showImg(https://segmentfault.com/img/bV0n2v?w=958&h=320); html *{ margin: 0; ...

    lsxiao 評論0 收藏0

  • 微信小程序新手入門之必勝客篇

    摘要：作為一個菜鳥級的初學者，筆者懵懵懂懂的花了點時間仿了一個必勝客的訂餐小程序，希望能對一些有需要的朋友提供一點啟發(fā)。開始訂餐點擊開始訂餐，跳轉(zhuǎn)到點餐頁面至此，這個必勝客小程序的首頁頁面就完成了，整個頁面看起來還是聽清爽的。 前言 什么是微信小程序？微信小程序是一種不需要下載安裝即可使用的應用，它實現(xiàn)了應用觸手可及的夢想，用戶掃一掃或者搜一下即可打開應用。這體現(xiàn)了用完即走的理念，用戶不用關...

    Xufc 評論0 收藏0

  • 爬取攜程和螞蜂窩的景點評論數(shù)據(jù)攜程評論數(shù)據(jù)爬取旅游網(wǎng)站數(shù)據(jù)爬取

    摘要：前言為了獲取多源數(shù)據(jù)需要到各個網(wǎng)站獲取一些景點的評論信息和圖片，首先選到了攜程和螞蜂窩這兩個網(wǎng)站，將一些爬取過程記錄下來本人長期出售超大量微博數(shù)據(jù)旅游網(wǎng)站評論數(shù)據(jù)，并提供各種指定數(shù)據(jù)爬取服務，。 前言 ??為了獲取多源數(shù)據(jù)需要到各個網(wǎng)站獲取一些景點的評論信息和圖片，首先選到了攜程和螞蜂窩這兩個網(wǎng)站，將一些爬取過程記錄下來 ??PS:(本人長期出售超大量微博數(shù)據(jù)、旅游網(wǎng)站評論數(shù)據(jù)，并...

    GraphQuery 評論0 收藏0

發(fā)表評論

0條評論

tainzhi

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<