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

骑猪看日落 2023-07-25 12:58 8阅读 0赞

## 用了jQuery写的 ##

**html代码**

css代码

**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'));
    
    }