使用jQuery封装轮播图插件

深碍√TFBOYSˉ_ 2022-05-19 10:43 350阅读 0赞

先展示一下效果：（因为截图工具的原因，小绿点不能正常展示）

![70][]

插件的拓展方式

(function ($) {
        //添加自定义jq插件
        $.fn.extend({
            pluginName: function (options) {
                //dosometing;
            }
        })
    })(jQuery);

插件的调用方式：

$(dom选择器).pluginName(options参数);

下面是我轮播图的插件代码，注意需要引入jqeury

/**
     * 轮播图jquery插件说明
     * 
     * 要求将被渲染为轮播图的div的id名为slider
     * 调用方式为$('#slider').sliderImg(imgs);
     * 其中imgs是图片数组，每一个数组元素为图片的路径名
     * 样式需引入slider.css, 默认图片大小为520*280px, 若图片大小不同请自行修改
     */
    (function ($) {
        function Slider(options) {
            this.wrapper = options.wrapper;
            this.timer = null;
            this.nowIndex = 0;
            this.itemWidth = parseInt(this.wrapper.css('width'));
            this.itemNum = imgs.length;
            this.locked = false;
            this.imgs = options;
    
            this.init();
        }
        Slider.prototype.init = function () {
            this.createDom();
            this.bindEvent();
            this.automove();
        },
        Slider.prototype.createDom = function () {
            var imgBox = $('<ul class="img-box"></ul>');
            var imgLi = '';
            var orderListStr = ''
            for (var i = 0; i < this.itemNum; i++) {
                imgLi += '<li><a href="javascript:void(0)">\
                            <img src="'+ this.imgs[i] + '" alt="">\
                        </a></li>';
                orderListStr += '<li></li>'
            }
            imgLi += '<li><a href="javascript:void(0)">\
                            <img src="'+ this.imgs[0] + '" alt="">\
                        </a></li>';
    
            var btnDiv = '<div class="btn">\
                                <a class="prev"><span></span></a>\
                                <a class="next"><span></span></a>\
                            </div>';
            var orderBox = $('<div class="order"></div>');
            var orderUl = $('<ul></ul>');
            $(this.wrapper).append(imgBox.html(imgLi))
                .append($(btnDiv))
                .append(orderBox.append(orderUl.html(orderListStr)));
            $('#slider .order li').eq(0).addClass('active');
        };
        /**
         * 绑定事件
         */
        Slider.prototype.bindEvent = function() {
            var self = this;
            $('#slider .order li').add('.next').add('.prev').on('click', function () {
                var className = $(this).attr('class')
                if (className == 'prev') {
                    self.move('prev');
                } else if (className == 'next') {
                    self.move('next');
                } else {
                    self.move($(this).index())
                }
            })
            $('#slider')
                .on('mouseenter', function () {
                    $('#slider .btn').show();
                    clearTimeout(self.timer);
                })
                .on('mouseleave', function () {
                    $('#slider .btn').hide();
                    self.automove();
                })
        }
        /**
         * 定时调用移动函数，轮播下一张图片
         */
        Slider.prototype.automove = function() {
            clearInterval(this.timer)
            var self = this;
            this.timer = setTimeout(function () {
                self.move('next');
            }, 2000);
        }
        /**
         * 根据方向，更改index，更改后的Index表示我想到哪一张去
         * @param {*} dir 方向
         */
        Slider.prototype.move = function(dir) {
            if (this.locked) {
                return;
            }
            this.locked = true;
            if (dir == 'prev' || dir == 'next') {
                if (dir == 'next') {
                    if (this.nowIndex == this.itemNum) {
                        this.nowIndex = 0;
                        $('#slider .img-box').css('left', 0);
                    }
                    this.nowIndex++;
                } else {
                    if (this.nowIndex == 0) {
                        this.nowIndex = this.itemNum;
                        $('#slider .img-box').css('left', -(this.itemNum * this.itemWidth) + 'px');
                    }
                    this.nowIndex--;
                }
            } else {
                this.nowIndex = dir;
            }
            //先改变索引样式，再滑动
            this.changeStyle();
            this.slider();
        }
        /**
         * 移动到nowindex指向元素的位置
         */
        Slider.prototype.slider = function() {
            var self = this;
            //这个animate必须写成对象形式
            $('#slider .img-box').animate({ left: -(self.nowIndex * self.itemWidth) + 'px' }, function () {
                self.automove();
                self.locked = false;
            })
        }
        /**
         * 修改索引的样式
         */
        Slider.prototype.changeStyle = function() {
            $('#slider .order .active').removeClass('active');
            if (this.nowIndex == this.itemNum) {    //处理多出来一个轮播页的关键！！！
                //这个时候是展示的多出来的那一张，其实是第0张
                $('#slider .order li').eq(0).addClass('active');
            } else {
                $('#slider .order li').eq(this.nowIndex).addClass('active');
            }
        }
    
        //添加自定义jq插件
        $.fn.extend({
            sliderImg: function (options) {
                options.wrapper = this || $('body');
                new Slider(options);
            }
        })
    })(jQuery);

轮播图插件的调用即我的index.html

<!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>jQuery轮播图插件</title>
        <link rel="stylesheet" href="./css/slider.css">
    </head>
    
    <body>
        <div id="slider"></div>
    
        <script src="./js/jquery.js"></script>
        <script src="./js/jquery.slider.js"></script>
        <script>
            var imgs = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg'];
            $('#slider').sliderImg(imgs);
        </script>
    </body>
    
    </html>

所用到的样式： slider.css和轮播图片在github上，地址 [》点我《][Link 1]

[70]: /images/20220519/c7933c6017634e2eb0c5429d3667640c.png
[Link 1]: https://github.com/huyaocode/demos/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BEjq%E6%8F%92%E4%BB%B6