简易轮播图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;}
        /* .imgbox{} */
        .imgbox img{width: 1000px;height:300px;position: absolute;left:0;top:0;overflow: hidden}
        .imgbox img:nth-child(1){z-index: 1}
        /* .imgbox a img{width: 1000px;height: 300px} */

        .btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);z-index: 9999999;}
        #left{left:0}
        #right{right:0}
    </style>
</head>
<body>
    <div class="banner">
        <div class="imgbox">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>
    function Banner(){
        // 1.选择元素
        this.imgs = document.querySelector(".imgbox").children;
        this.left = document.querySelector("#left");
        this.right = document.querySelector("#right");

        // 自定义的默认显示的图片：索引
        this.index = 0;

        // 为了显示图片设置的层级
        this.i = 2;

        // 2.绑定点击事件
        this.init()
    }
    Banner.prototype.init = function(){
        var that = this;
        // 绑定事件...
        this.right.onclick = function(){
            // 3.计算索引
            that.changeIndex();
        }
        this.left.onclick=function () {
            that.changeIndex2();//为什么不用this？因为这里的this绑定的是点击的元素,如果用this指的是实例

        }
    }

    Banner.prototype.changeIndex = function(){
        // 计算索引
        if(this.index === this.imgs.length-1){
            this.index = 0;
        }else{
            this.index++;
        }
        // 4.根据索引，显示图片
        this.display()
    }
    Banner.prototype.display = function(){
        
        // 显示图片
        this.imgs[this.index].style.zIndex = this.i++;


        this.imgs[this.index].style.width = "0";
        this.imgs[this.index].style.height = "0";
        move(this.imgs[this.index],{
            width:1000,
            height:150
        },function(){
            move(this.imgs[this.index],{height:300})
        }.bind(this))
    }
    Banner.prototype.changeIndex2=function () {
        if(this.index==0){
            this.index=this.imgs.length-1
        }
        else{
            this.index--;//点击的时候索引就加1

        }
        this.display2()

    };
    Banner.prototype.display2=function () {
        this.imgs[this.index].style.zIndex=this.i++;
        this.imgs[this.index].style.left = "2000px";
        move(this.imgs[this.index],{
            left:0
        });
    }
    new Banner();
    function move(ele,json,callback){
        clearInterval(ele.t);
        ele.t = setInterval(() => {
            var onoff = true;
        for(var i in json){
            var iNow = parseInt(getStyle(ele,i));
            var speed = (json[i] - iNow)/6;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
            if(iNow != json[i]){
                onoff = false;
            }
            ele.style[i] = iNow + speed + "px";
        }
        if(onoff){
            clearInterval(ele.t);
            callback && callback();
        }
    }, 30);
    }
    function getStyle(ele,attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele,false)[attr];
        }
    }
</script>
</html>

 

posted @ 2019-09-04 20:02  菜鸟小何  阅读(408)  评论(0)  编辑  收藏  举报