JS轮播图面向对象的写法(jQuery方式)

用了jQuery写的

html代码

 <div id="container">
        <div id="pre">《</div>
        <div id="next">》</div>
        <div id="list" style="left:0px;">
            <a href="#"><img src="1.jpg" width="1000"></a>
            <a href="#"><img src="2.jpg" width="1000"></a>
            <a href="#"><img src="3.jpg" width="1000"></a>
            <a href="#"><img src="4.jpg" width="1000"></a>
            <a href="#"><img src="5.jpg" width="1000"></a>
        </div>
        <div id="dot">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
    </div>

css代码

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #container {
            width: 1000px;
            height: 409px;
            position: relative;
            margin: 20px auto;
            overflow: hidden;
        }
        
        #list {
            width: 5000px;
            height: 409px;
            position: absolute;
            z-index: 1
        }
        
        #list img {
            float: left;
            display: block;
        }
      
        #pre {
            line-height: 45px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            width: 45px;
            height: 45px;
            float: left;
            position: absolute;
            top: 190px;
            left: 10px;
            cursor: pointer;
            display: none;
            z-index: 2;
        }
        
        #next {
            line-height: 45px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            width: 45px;
            height: 45px;
            float: left;
            position: absolute;
            top: 190px;
            right: 10px;
            cursor: pointer;
            display: none;
            z-index: 2;
        }
        
        #container:hover #pre,
        #container:hover #next {
            display: block;
        }
        
        #pre:hover,
        #next:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }
        
        #dot {
            width: 1000px;
            height: 10px;
            position: absolute;
            bottom: 15px;
            left: 450px;
            z-index: 10;
        }
        
        #dot span {
            width: 10px;
            height: 10px;
            display: block;
            border-radius: 10px;
            background-color: #fff;
            margin: 0 5px;
            float: left;
            cursor: pointer;
        }
        
        #dot .on {
            background-color: #69aaec;
        }
    </style>

js代码

$(function() {
    function RotationChart(under, down, list) {
        this.under = under;
        this.down = down;
        this.list = list;
        this.initMove();
        this.instance = 0;

    }

    //改变原型,在原型上添加共享的方法,如果不懂为什么,可以先去看一下我之前写的构造函数原型和原型对象的文章
    RotationChart.prototype = {
        //把constructor指回构造函数本身
        constructor: RotationChart,
       //初始化事件和方法
        initMove: function() {
            //定义一个index,后面会用到
            this.index = 0;
            this.pre();
            //自动轮播的方法
            this.autoplay();
            //鼠标移入移出事件,用来作自动轮播的
            this.list.on("mouseover", () => {
                this.stopPlay();
            });
            this.list.on("mouseout", () => {
                this.continuePlay()
            });
        },
        //往上翻页的方法
        pre: function() {
            this.under.on('click', () => {
                this.animateLeft()
                this.index -= 1;
                if (this.index < 0) {
                    this.index = 4
                    this.cirle(this.index)
                }
                this.cirle(this.index)
            })
        },
        //往下翻页的方法
        next: function() {
            return this.down.on('click', () => {
                this.animateRight()
                this.index += 1;

                this.cirle(this.index)
                if (this.index >= 5) {
                    this.index = 0
                    this.cirle(this.index)
                }
            })
        },
        //控制容器向左移动的方法
        animateLeft: function() {
            if (this.instance >= 0) {
                this.instance = -4000;
                this.list.stop().animate({ left: this.instance + "px" }, "normal");
            } else {
                this.instance += 1000;
                this.list.stop().animate({ left: this.instance + "px" }, "normal");
            }
        },
        //控制容器向右移动的方法
        animateRight: function() {
            if (this.instance <= -4000) {
                this.instance = 0;
                this.list.stop().animate({ left: this.instance + "px" }, "normal");
            } else {
                this.instance -= 1000;
                this.list.stop().animate({ left: this.instance + "px" }, "normal");
            }
        },
        //小圆圈的运动的方法
        cirle: function(index) {
            $('#dot span').removeClass()
            $(`#dot span:eq(${index})`).addClass('on')
        },

        // 自动播放功能
        autoplay: function() {
            this.aa = this.next();
            this.timer = setInterval(() => {
                this.aa.click();
            }, 2000);
        },
        // 停止播放的方法
        stopPlay: function() {
            clearInterval(this.timer)
        },
        //移出的时候轮播继续的方法
        continuePlay: function() {
            this.timer = setInterval(() => {
                this.aa.click();
            }, 2000);
        }


    }


//最后实例化对象,把jQuery获取的DOM对象传进构造函数.
    new RotationChart($('#pre'), $('#next'), $('#list'));

}