js面向对象轮播图案例

轮播图案例

    
<body>
    <div class="cont">
        <div class="imgbox">
            <a><img src="http://cache.soso.com/baike/images/city/bd586766902bf0c8b6e16cd1f1cbe4be.jpg"/></a>
            <a><img src="http://cache.soso.com/baike/images/city/f2bb262beda50838dbbacc66f6787ca5.jpg"/></a>
            <a><img src="http://cache.soso.com/baike/images/city/b87a6d54067f9abaa69d39e48ddbcfc9.jpg"/></a>
            <a><img src="http://cache.soso.com/baike/images/city/b8fa5db3103b8c4593618aadd8ea0311.jpg"/></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
        <div class="list">
            <span class="active">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
    </div>
<script src="move.js"></script>
<script>

    class Banner{
        constructor(){
            this.img = document.querySelectorAll(".imgbox a");
            this.left = document.getElementById("left");
            this.right = document.getElementById("right");
            this.span = document.querySelectorAll(".list span");

            // 4假设索引
            // 假设当前是0
            this.iNow = 0;
            // 假设上一张是最后一张
            this.iPrev = this.img.length-1;

            // 1绑定事件
            this.addEvent()
        }
        addEvent(){
            var that = this; 
            // 2-1左按钮事件
            this.left.onclick = function(){
                // 3-1改变索引
                that.btnChangeIndex(1);
                // 11-1点击按钮时,也设置span的当前焦点
                that.setActive(that.span[that.iNow]);
            }
            // 2-2右按钮事件
            this.right.onclick = function(){
                // 3-2改变索引
                that.btnChangeIndex(-1);
                // 11-2点击按钮时,也设置span的当前焦点
                that.setActive(that.span[that.iNow]);
            }
            // 6绑定span的事件
            for(var i=0;i<this.span.length;i++){
                // 7绑定span的索引
                this.span[i].index = i;
                this.span[i].onclick = function(){
                    // console.log(this.index); 当前span索引
                    // 8计算索引
                    that.listChangeIndex(this.index);
                    // 10设置当前焦点
                    that.setActive(this);
                }
            }
        }
        listChangeIndex(index){
            // 计算索引功能:点击元素的索引
            // 点击的比当前大,向左运动
            if(index > this.iNow){
                // console.log("左")
                // 9-1开始运动
                this.listMove(1,index)
            }
            // 点击的比当前小,向右运动
            if(index < this.iNow){
                // console.log("右")
                // 9-2开始运动
                this.listMove(-1,index)
            }

            this.iNow = index;
        }
        listMove(d,index){
            // span的运动功能:参考btn的运动:
                // 参数1:方向:1或-1
                // 参数2:点击的元素的索引
            this.img[this.iNow].style.left = 0;
            move(this.img[this.iNow], {left:-this.img[0].offsetWidth*d})

            this.img[index].style.left = this.img[0].offsetWidth*d + "px";
            move(this.img[index], {left:0})
        }
        setActive(ele){
            // 当前焦点的功能:参数:当前span
            for(var i=0;i<this.span.length;i++){
                this.span[i].className = "";
            }
            ele.className = "active"
        }
        btnChangeIndex(d){
            // 改变索引功能:方向:1或-1
            if(d === 1){
                if(this.iNow == 0){
                    this.iNow = this.img.length-1;
                    this.iPrev = 0;
                }else{
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }else{
                if(this.iNow == this.img.length-1){
                    this.iNow = 0;
                    this.iPrev = this.img.length-1
                }else{
                    this.iNow++;
                    this.iPrev = this.iNow - 1;
                }
            }
            // 5左右按钮的运动
            this.btnMove(d);
        }
        btnMove(d){
            // 左右按钮运动的功能:方向:1或-1
            // console.log(this.iPrev, this.iNow);
            // 设置从哪开始走
            this.img[this.iPrev].style.left = 0;
            // 走到哪
            move(this.img[this.iPrev],{
                left:this.img[0].offsetWidth * d
            })

            // 设置从哪开始进来
            this.img[this.iNow].style.left = -this.img[0].offsetWidth *    d+"px";
            // 进到哪
            move(this.img[this.iNow],{left:0});
        }
    }
    new Banner;
</script>
</body>
//move方法
function move(ele, data, cb){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        var onoff = true;
        for(var attr in data){
            var iNow = attr === "opacity" ? getStyle(ele, attr) * 100 : parseInt(getStyle(ele, attr));

            var speed = (data[attr] - iNow)/10;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);

            if(data[attr] !== iNow) onoff = false;

            ele.style[attr] = attr === "opacity" ? (iNow + speed)/100 : iNow + speed + "px";
        }
        if(onoff){
            clearInterval(ele.t);
            cb && cb();
        }
    }, 30);
}

你可能感兴趣的:(js面向对象轮播图案例)