资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Banner_仿《蚂蜂窝》首页的Banner

Banner_仿《蚂蜂窝》首页的Banner

tainzhi / 1116人阅读

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

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
私有云 服务器托管 蚂蜂窝 Banner Banner2 网站banner

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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

  • 微信小程序新手入门之必胜客篇

    摘要：作为一个菜鸟级的初学者，笔者懵懵懂懂的花了点时间仿了一个必胜客的订餐小程序，希望能对一些有需要的朋友提供一点启发。开始订餐点击开始订餐，跳转到点餐页面至此，这个必胜客小程序的首页页面就完成了，整个页面看起来还是听清爽的。 前言 什么是微信小程序？微信小程序是一种不需要下载安装即可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下即可打开应用。这体现了用完即走的理念，用户不用关...

    Xufc 评论0 收藏0

  • 爬取携程和蚂蜂窝的景点评论数据携程评论数据爬取旅游网站数据爬取

    摘要：前言为了获取多源数据需要到各个网站获取一些景点的评论信息和图片，首先选到了携程和蚂蜂窝这两个网站，将一些爬取过程记录下来本人长期出售超大量微博数据旅游网站评论数据，并提供各种指定数据爬取服务，。 前言   为了获取多源数据需要到各个网站获取一些景点的评论信息和图片，首先选到了携程和蚂蜂窝这两个网站，将一些爬取过程记录下来   PS:(本人长期出售超大量微博数据、旅游网站评论数据，并...

    gyl_coder 评论0 收藏0

  • 爬取携程和蚂蜂窝的景点评论数据携程评论数据爬取旅游网站数据爬取

    摘要：前言为了获取多源数据需要到各个网站获取一些景点的评论信息和图片，首先选到了携程和蚂蜂窝这两个网站，将一些爬取过程记录下来本人长期出售超大量微博数据旅游网站评论数据，并提供各种指定数据爬取服务，。 前言   为了获取多源数据需要到各个网站获取一些景点的评论信息和图片，首先选到了携程和蚂蜂窝这两个网站，将一些爬取过程记录下来   PS:(本人长期出售超大量微博数据、旅游网站评论数据，并...

    GraphQuery 评论0 收藏0

发表评论

登陆后可评论

0条评论

tainzhi

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<