原生继承淘宝轮播图

    
    
    
    






    

        

            
[外链图片转存失败(img-LvjN3bXw-1562144468086)(https://mp.csdn.net/img/1.jpg)]
            
[外链图片转存失败(img-ZzxHJCgL-1562144468089)(https://mp.csdn.net/img/2.jpg)]
            
[外链图片转存失败(img-arJIBlAn-1562144468089)(https://mp.csdn.net/img/3.jpg)]
            
[外链图片转存失败(img-MvGLqX42-1562144468090)(https://mp.csdn.net/img/4.jpg)]
            
[外链图片转存失败(img-i9Eb84hi-1562144468090)(https://mp.csdn.net/img/5.jpg)]
        
        <
        >
        

            
1
            
2
            
3
            
4
            
5
        

    
    

animateBak.js/**
 * Created by jameswatt2008 on 2017/6/5.
 */

function animate(div, obj) {
    //console.log(cb)

    //{left:100;top:200}
    //{left:100}
    //{left:100}
    clearInterval(div.timer);

    div.timer = setInterval(function () {
        var flag = true;//假设已经到了目的地
        //1-0.5
        //100  50
        for (var key in obj) {
            // console.log(key)//left   top   getStyle['left']
            // console.log(obj[key])//300
            var target = obj[key];
            if (key == 'opacity') {
                var speed = (target - parseFloat(getStyle(div)[key])) * 100 / 8;
                // console.log(speed,'speed1')
                speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
                //console.log(speed,'speed2')

                var op = parseFloat(getStyle(div)[key]) + speed / 100;
                // console.log(op)

                div.style[key] = op;
                if (parseFloat(getStyle(div)[key]) != target) {
                    flag = false;
                }

            } else {
                var speed = (target - parseInt(getStyle(div)[key])) / 8;
                speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
                div.style[key] = parseInt(getStyle(div)[key]) + speed + 'px';
                if (parseInt(getStyle(div)[key]) != target) {
                    flag = false;
                }
            }
        }

        //必须等到所有的 属性都到达目的地 才能结束定时器
        if (flag == true) {
            clearInterval(div.timer);



        }

    }, 30);

}

function getStyle(ele) {
    if (ele.currentStyle) {
        return ele.currentStyle;
    } else {
        return getComputedStyle(ele, null);
    }
}

"jdlb.js
class LunBo {
    constructor(sel) {
        this.sel = sel//变成属性
        this.el = document.querySelector(this.sel)//定义el最外层盒子元素

        this.rightBtn = this.el.querySelector('.rightBtn')//右按钮
        this.leftBtn = this.el.querySelector('.leftBtn')//左按钮

        this.pointLis = this.el.querySelectorAll('.page li')//获取小圆点
        this.pageLis = this.el.querySelectorAll('.item li')//获取图片

        this.pageNum = 0;//记录当前显示哪一张
        this.showPoint()
        //给右键增加事件
        this.btnsEvent()//按钮点击事件
        this.atuoPlay()//自动播放
        this.pointEvent()//小圆点点击事件
    }
    //小圆点的点击事件
    pointEvent() {
        let that = this
        for (let i = 0; i < this.pointLis.length; i++) {
            this.pointLis[i].onclick = () => {
                animate(this.pageLis[this.pageNum], { opacity: 0 })
                this.pageNum = i;
                animate(this.pageLis[this.pageNum], { opacity: 1 })
                this.showPoint()
            }
        }
    }
    //小圆点显示
    showPoint() {
        for (let i = 0; i < this.pointLis.length; i++) {
            this.pointLis[i].style.backgroundColor = 'red'
        }
        this.pointLis[this.pageNum].style.backgroundColor = 'white'
    }
    //封装右按钮点击事件
    next() {
        let that = this
        //that.pageLis[that.pageNum].style.opacity = 0
        animate(that.pageLis[that.pageNum], { opacity: 0 })
        //点击时播放下一张图片
        that.pageNum++;
        //当图片到最后一张时，让他下一张回到第一张
        if (that.pageNum == 5) {
            that.pageNum = 0;
        }
        //that.pageLis[that.pageNum].style.opacity = 1
        animate(that.pageLis[that.pageNum], { opacity: 1 })
        //根据页码 显示对应的小圆点
        that.showPoint()
    }
    //给按钮加事件
    btnsEvent() {
        let that = this
        //右键
        this.rightBtn.onclick = function () {
            that.next()
        }
        //左键
        this.leftBtn.onclick = function () {
            that.pev()
        }
    }
    //自动播放
    atuoPlay() {
        this.timer = setInterval(() => {
            this.next()
        }, 3000)
        //定时器
        this.el.onmouseenter = () => {
            clearInterval(this.timer)
        }
        this.el.onmouseleave = () => {
            this.timer = setInterval(() => {
                this.next()
            }, 3000)
        }
    }
}
class TbLunBo extends LunBo {
    constructor(sel) {
        super(sel);
        this.oUl = this.el.querySelector('.item')
        let cloneNode = this.pageLis[0].cloneNode(true)
        this.oUl.appendChild(cloneNode)
    }
    //点击时播放下一张图片
    next() {
        let that = this
        //点击时播放下一张图片
        that.pageNum++;
        //当图片到最后一张时，让他下一张回到第一张
        if (that.pageNum == 6) {
            this.oUl.style.left = 0
            that.pageNum = 1
        }
        animate(this.oUl, {
            left: -that.pageNum * 590
        })
        //根据页码 显示对应的小圆点
        that.showPoint()
    }
    //小圆点的点击事件
    pointEvent() {
        let that = this
        for (let i = 0; i < this.pointLis.length; i++) {
            this.pointLis[i].onclick = () => {
                this.pageNum = i;
                animate(this.oUl, {
                    left: -590 * this.pageNum
                })
                this.showPoint()
            }
        }
    }
    //小圆点显示
    showPoint() {
        for (let i = 0; i < this.pointLis.length; i++) {
            this.pointLis[i].style.backgroundColor = 'red'
        }
        if (this.pageNum == 5) {
            this.pointLis[0].style.backgroundColor = 'white'
        } else {
            this.pointLis[this.pageNum].style.backgroundColor = 'white'
        }

    }
    //左按钮事件
    pev() {
        let that = this
        //点击时播放下一张图片
        that.pageNum--;
        //当图片到最后一张时，让他下一张回到第一张
        if (that.pageNum == -1) {
            this.oUl.style.left = -5 * 590 + 'px'
            this.pageNum = 4
        }
        //that.pageLis[that.pageNum].style.opacity = 1
        animate(that.oUl, { left: -590 * this.pageNum })
        that.showPoint()
    }
}