前端开发JavaScript

以原型对象属性方式开发轮播图插件

JavaScript

jQuery实现轮播图效果，顺便复习一下原型对象属性的书写模式。可通过new Carousel创建一个轮播图实例。

  • 创建一个carousel.js文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    (function(){
        //强行暴露一个变量
        window.Carousel = Carousel;
        function Carousel(JSON){
            this.dom             = $("#" + JSON.id);      //放置轮播图的父容器
            this.$imagesUl       = null;                  //放置轮播图的ul
            this.$imagesUlLis    = null;                  //放置轮播图的li
            this.$leftBtn        = null;                  //放置轮播图左按钮            
            this.$rightBtn       = null;                  //放置轮播图右按钮 
            this.$circleOl       = null;                  //放置轮播的小圆点的ol
            this.$circleLis      = null;                  //放置轮播的小圆点的li
            this.pictureLength   = JSON.images.length;    //图片个数
            this.image           = JSON.images;           //图片地址数组
            this.height          = JSON.height;           //高
            this.width           = JSON.width;            //宽
            this.leftBtn         = null;                  //左按钮
            this.rightBtn        = null;                  //右按钮
            this.index           = 0;                     //当前轮播图的序号
            this.animateDuration = JSON.animateDuration;  //缓动时间
            this.interval        = JSON.interval;         //间隔时间
            this.timer           = null;                  //定时器
            
            this.init();                                  //初始化
            this.bindEvent();                             //绑定事件
            this.autoPlay()                               //自动播放
        }
        //初始化
        Carousel.prototype.init = function(){
            //创建dom树
            this.$imagesUl = $("<ul></ul>");
            this.dom.append(this.$imagesUl);
            for(var i=0 ;i<this.pictureLength;i++){
                $("<li><img src='"+this.image[i]+"'></li>").appendTo(this.$imagesUl)
            }
            this.$imagesUlLis = this.$imagesUl.find("li");
            //布局
            this.dom.css({
                "height" : this.height + "px",
                "width" : this.width + "px",
                "position" : "relative",
                "overflow" : "hidden"
            })
            this.$imagesUlLis.css({
                "position" : "absolute",
                "left" : this.width + "px",
                "top" : 0,
                "list-style" : "none"
            })
            this.$imagesUlLis.eq(0).css("left",0)
            //创建按钮
            this.$leftBtn = $("<a href='javascript:;' class='leftBtn'></a>");
            this.$rightBtn = $("<a href='javascript:;' class='rightBtn'></a>");
            this.$leftBtn.appendTo(this.dom);
            this.$rightBtn.appendTo(this.dom);
            //小圆点
            this.$circleOl =$("<ol class='circles'></ol>");
            this.$circleOl.appendTo(this.dom);
            for(var i=0 ;i<this.pictureLength;i++){
                $("<li></li>").appendTo(this.$circleOl);
            }
            this.$circleLis = this.$circleOl.find("li");
            this.$circleLis.eq(0).addClass("current");
        }
        //绑定事件
        Carousel.prototype.bindEvent = function(){
            var self = this;
            this.$rightBtn.click(function(){
                if(self.$imagesUlLis.is(":animated")){
                    return 
                }
                self.showNext();
            })
            this.$leftBtn.click(function(){
                self.showPrev();
            })
            this.$circleLis.click(function(){
                self.show($(this).index())
            })
            this.dom.mouseenter(function(){
                clearInterval(self.timer)
            });
            this.dom.mouseleave(function(){
                self.autoPlay()
            });
        }
        //显示下一个轮播图
        Carousel.prototype.showNext = function(){
            this.$imagesUlLis.eq(this.index).animate({"left":-this.width},this.animateDuration)
            this.index ++ ;
            this.index = this.index>(this.pictureLength-1)?0:this.index;
            this.$imagesUlLis.eq(this.index).css("left",this.width).animate({"left":0},this.animateDuration);
            this.changeCircles()
        }
        //显示上一个轮播图
        Carousel.prototype.showPrev = function(){
            this.$imagesUlLis.eq(this.index).animate({"left":this.width},this.animateDuration)
            this.index -- ;
            this.index = this.index < 0 ?this.pictureLength-1:this.index;
            this.$imagesUlLis.eq(this.index).css("left",-this.width).animate({"left":0},this.animateDuration);
            this.changeCircles()
        }
        //点击小圆点切换轮播图
        Carousel.prototype.show = function(number){
            var old = this.index;
            this.index = number;
            if(this.index>old){
                this.$imagesUlLis.eq(old).animate({"left":-this.width},this.animateDuration);
                this.$imagesUlLis.eq(this.index).css("left",this.width).animate({"left":0},this.animateDuration);
            }else{
                this.$imagesUlLis.eq(old).animate({"left":this.width},this.animateDuration);
                this.$imagesUlLis.eq(this.index).css("left",-this.width).animate({"left":0},this.animateDuration);
            }
            this.changeCircles()
        }
        //点击小圆点的状态随轮播图的切换而切换
        Carousel.prototype.changeCircles = function(){
            this.$circleLis.eq(this.index).addClass("current").siblings().removeClass();
        }
        //自动播放
        Carousel.prototype.autoPlay = function(){
            var self = this;
            this.timer  =setInterval(function(){
                self.showNext();
            },this.interval);
        }
    })()

  • 在html文件中引进刚才的carsouel.js文件,创建一个轮播图对象，附加上css样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    <!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>轮播图</title>
        <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
        <script src="Carousel.js"></script>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            #lunbo{
                margin: 100px auto;
            }
            .leftBtn{
                display: block;
                width: 40px;
                height: 50px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 150px;
                margin-top: -25px;
            }
            .rightBtn{
                display: block;
                width: 40px;
                height: 50px;
                background-color: red;
                position: absolute;
                left: 460px;
                top: 150px;
                margin-top: -25px;
            }
            .circles{
                position: absolute;
                top: 270px;
                left: 250px;
                margin-left: -68px;
            }
            .circles li{
                width: 16px;
                height: 16px;
                border-radius: 8px;
                background-color: green;
                list-style: none;
                float: left;
                margin-left: 8px;
                cursor: pointer;
            }
            .circles li.current{
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="lunbo"></div>
        <script>
            //创建轮播图实例
            var c = new Carousel({
                "id" : "lunbo",
                "images":[
                    "img/0.png",
                    "img/1.png",
                    "img/2.png",
                    "img/3.png",
                    "img/4.png",
                    "img/5.png",
                ],
                "height" : 300,
                "width" : 500,
                "animateDuration" : 500,
                "interval" : 3000 
            })
        </script>
    </body>
    </html>
分享到