美文网首页
封装轮播图

封装轮播图

作者: hanahaha | 来源:发表于2017-09-26 16:48 被阅读0次

    分为3个方面

    一、HTML

    布局原理:

    • swipper-container相对定位relative,宽度仅为一张图片的宽度,超出的部分全部hidden
    • swipper-container中的元素绝对定位absolute,其中图片列表lists的z-index为1,前进后退按钮和底部选择按钮z-index为2.图片列表lists的内容float平铺
    • lists通过left属性的定位来轮播某一张图片
    <!DOCTYPE html>
    <html>
      <head>
        <title>Throttle</title>
        <link href="./swiper.css" rel="stylesheet" type="text/css">
        <style>
          *{
            margin: 0;
            padding: 0;
            text-decoration: none;
          }
        </style>
      </head>
      <body>
        <div id="swipper-container">
          <div class="list">
            <"img"  src="./rotation1.jpg">
            <"img"  src="./rotation2.jpg">
            <"img"  src="./rotation3.jpg">
            <"img"  src="./rotation4.jpg">
            <"img"  src="./rotation5.jpg">
          </div>
          <div class="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
          </div>
          <a href="javascript:void(0)" class="prev arrow"><</a>
          <a href="javascript:void(0)" class="next arrow">></a>
        </div>
        <script type='text/javascript' src='./swiper.js'></script>
        <script type="text/javascript"> 
           new Swiper('swipper-container');
        </script>
      </body>
    </html>
    

    二、CSS

    #swipper-container{
            position:relative;
            width:1500px;  /*轮播区域宽度,可以视图片宽度而定*/
            height:410px;   /*轮播区域高度,可以视图片高度而定*/
            overflow:hidden;  /*重要!!!表示只能显示width这么宽的宽度,超出的部分隐藏起来*/
     }
    #swipper-container .list{
            position:absolute;
            z-index:1;
            width:100%;/*在js中会根据图片的数量和宽度重新设定这个宽度*/
            height:100%;
    }
    #swipper-container .list img{
            float:left;    /*平铺所有的轮播图片*/
    }
    #swipper-container .buttons{
            position:absolute;
            left:50%;
            bottom:20px;
            z-index:2;
            height:10px;
            width:100px;
    }
    #swipper-container .buttons span{
            float:left;
            margin-right:5px;
            width:10px;
            height:10px;
            border:1px solid #fff;
            border-radius: 50%;
            background-color: #333;
            cursor:pointer;
    }
    #swipper-container .buttons span.on {
            background: orangered;
    }
    #swipper-container .arrow{
            position:absolute;
            top:40%;
            z-index:2;
            display:none;
            width:40px;
            height:40px;
            font-size:36px;
            font-weight:bold;
            line-height: 39px;
            text-align: center;
            color:#666;
            background-color:rgba(0, 0, 0, 0.3);
            cursor:pointer;
    }
    #swipper-container:hover .arrow {
            display: block;
    }
    #swipper-container .arrow:hover {
            background-color: rgba(0, 0, 0, .7);
    }
    #swipper-container .prev {
            left: 20px;
    }
    #swipper-container .next {
            right: 20px;
    }
    

    三、javascript

    封装的JS代码包括:

    • Swiper的构造函数,包括各种属性
    • Swiper的原型prototype
    (function(){
        function Swiper(selector){
            this.timer='';    //定时器
            this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);//轮播的container
            this.offset=parseInt(this.getStyle('width'));  //轮播区域的宽度
            this.lists = this.elem.getElementsByClassName('list')[0];   //轮播的图片列表
            this.listLength=this.lists.children.length;   //轮播的图片数量
            this.listsLeft=0;                             //轮播图片的当前偏移量
            this.buttons = this.elem.getElementsByClassName('buttons')[0];//轮播图片的对应按钮
            this.index=1;                                 //当前播放图片的索引
            this.prev = this.elem.getElementsByClassName('prev')[0];  //轮播上一张图
            this.next = this.elem.getElementsByClassName('next')[0];  //轮播下一张图
            this.init(); //轮播对象的初始化,主要是给按钮添加侦听
        }
        Swiper.prototype={
            constructor:Swiper,
            //获取元素某个样式
            getStyle:function(property){
                return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem,false)[property] : this.elem.currentStyle[property];
            },
            init:function(){
                var self=this;
                self.timer=setInterval(function(){  //初始时自动轮播
                    self.next.click();
                },3000);
                this.lists.style.width=this.offset*this.listLength+'px';  //将轮播图片平铺,列表区域宽度设为单个图片宽度*图片数量
                this.elem.addEventListener('mouseover',stop,false); //鼠标进入轮播区域暂停播放
                this.elem.addEventListener('mouseout',go,false);  //鼠标离开轮播区域开始播放
                this.prev.addEventListener('click',animation,false); //点击前一个
                this.next.addEventListener('click',animation,false);  //点击后一个
                this.buttons.addEventListener('click',selectButton,false);  //点击底部的按钮选择播放哪张图
                function go(){
                    self.timer=setInterval(function(){
                        self.next.click();  //自动点击下一张
                    },5000);
                }
                function stop(){
                    clearInterval(self.timer);
                }
                function animation(event){
                    if(event.target.className.slice(0,4)=="next"){   //如果点击的是下一张
                        if(self.listsLeft<=-self.offset*(self.listLength-1)){ //当前已经是最后一张
                            self.index=1;
                            self.listsLeft = 0;
                        }
                        else{
                            self.index+=1;
                            self.listsLeft=self.listsLeft-self.offset;
                        }
                    }
                    else if(event.target.className.slice(0,4)=="prev"){  //如果点击的是前一张
                        if(self.listsLeft>=0){                 //当前已经是第一张
                            self.index=self.listLength;
                            self.listsLeft = -self.offset*(self.listLength-1);
                        }
                        else{
                            self.index-=1;
                            self.listsLeft=self.listsLeft+self.offset;
                        }
                    }
                    self.lists.style.left=self.listsLeft+'px';
                    buttonsShow();
                }
                function buttonsShow(){     //改变button的‘on’类
                    for(var i=0;i<self.listLength;i++){
                        if(self.buttons.children[i].className=='on'){
                            self.buttons.children[i].className='';
                        }
                    }
                    self.buttons.children[self.index-1].className='on';
                }
                function selectButton(event){    //按钮选择轮播某张图
                    self.index=parseInt(event.target.getAttribute('index'));  //获取按钮的index属性
                    self.listsLeft=-self.offset*(self.index-1);
                    self.lists.style.left=self.listsLeft+'px';
                    buttonsShow();   //改变button的‘on’类
                }
            }
        }
        window.Swiper=Swiper;
    })()
    

    相关文章

      网友评论

          本文标题:封装轮播图

          本文链接:https://www.haomeiwen.com/subject/vposextx.html