封装一个简单的banner轮播插件

最新推荐文章于 2023-12-28 15:48:16 发布

娄笙悦

最新推荐文章于 2023-12-28 15:48:16 发布

阅读量1.8k

点赞数 1

分类专栏：插件开发文章标签：插件 banner轮播轮播插件封装性

本文链接：https://blog.csdn.net/weixin_41424247/article/details/78826257

版权

插件开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一般普通企业网站都有一个首页轮播，为了实现这个功能，我们可以引用第三方插件（比如：swiper）；当然，我们更感兴趣的是如何自己封装一个简单的轮播插件

废话少说，直接上码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {  margin: 0;  padding: 0;  font-family: '微软雅黑';  }
        a {  text-decoration: none;  }
        ul, ol, dl {  list-style-type: none;  }
        img {  border: none;  }
        input, button, a, img {  outline: none;  }
        html {  height: 100%;  }
        body {  height: 100%;  }

        .banner-box {  width: 100%;  margin: 0px auto;  overflow: hidden;  position: relative;  }
        .banner-box .list {  width: 1000%;  overflow: hidden;  position: relative;  left: 0;  top: 0;  }
        .banner-box .list li {  width: 10%;  float: left;  overflow: hidden;  }
        .banner-box .list li:first-child {  display: block;  }
        .banner-box .list li a img {  width: 100%;  display: block;  }
        .banner-box .prev,
        .banner-box .next {  position: absolute;  width: 100px;  height: 100px;  font-size: 50px;  line-height: 100px;  background-color: rgba(0, 0, 0, 0.4);  top: 50%;  margin-top: -50px;  color: #ffffff;  text-align: center;  cursor: pointer;  }
        .banner-box .prev:hover,
        .banner-box .next:hover {  background-color: rgba(0, 0, 0, 0.6);  }
        .banner-box .prev {  left: 0;  }
        .banner-box .next {  right: 0;  }
        .banner-box .banner-pages {  position: absolute;  bottom: 20px;  height: 20px;  width: 100%;  text-align: center;  font-size: 0;  }
        .banner-box .banner-pages span {  width: 20px;  height: 20px;  background-color: #cccccc;  display: inline-block;  border-radius: 50%;  -moz-border-radius: 50%;  -webkit-border-radius: 50%;  position: relative;  cursor: pointer;  margin: 0 6px;  line-height: 30px;  text-align: center;  z-index: 1;  font-size: 0px;  }
        .banner-box .banner-pages span.on {  background-color: #f99c38;  color: #ffffff;  }
    </style>
</head>
<body>
<div class="banner-box">
    <ul class="list">
        <li><a href="javascript:;"><img src="http://www.loushengyue.com/myself/img/index_banner1.jpg" alt="index_banner1.jpg"></a></li>
        <li><a href="javascript:;"><img src="http://www.loushengyue.com/myself/img/index_banner2.jpg" alt="index_banner2.jpg"></a></li>
        <li><a href="javascript:;"><img src="http://www.loushengyue.com/myself/img/index_banner3.jpg" alt="index_banner3.jpg"></a></li>
        <li><a href="javascript:;"><img src="http://www.loushengyue.com/myself/img/index_banner4.jpg" alt="index_banner4.jpg"></a></li>
    </ul>
    <div class="prev">&lt;</div>
    <div class="next">&gt;</div>
    <div class="banner-pages">
        <span class="on">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script>
    ;(function (win, $) {
        var banner = function (obj) {
            this.bannerBox = $(obj);
            this.listBox = this.bannerBox.find('.list');
            this.list = this.bannerBox.find('.list li');
            this.prevBtn = this.bannerBox.find('.prev');
            this.nextBtn = this.bannerBox.find('.next');
            this.pages = this.bannerBox.find('.banner-pages span');
            this.index = 0;
            this.len = this.list.length;
            this.timer = null;
            this.isClicked = false;
            this.cloneOneToLast = this.list.eq(0).clone();
            this.cloneOneToLast.appendTo(this.listBox);
            this.nextBtnClickEvent();
            this.prevBtnClickEvent();
            this.pagesClickEvent();
            this.bannerBoxHoverEvent();
            this.autoPlay();
        };
        $.extend(true, banner.prototype, {
            runByIndex: function () {
                var _this = this;
                this.pages.removeClass('on');
                if (this.index == this.len || this.index == 0) {
                    this.pages.eq(0).addClass('on')
                } else {
                    this.pages.eq(this.index).addClass('on');
                }
                this.listBox.animate({left: -this.index * 100 + '%'}, 500, function () {
                    _this.isClicked = false;
                });
            },
            autoPlay: function () {
                var _this = this;
                _this.stopRun();
                _this.timer = setInterval(function () {
                    _this.nextRun();
                }, 3000);
            },
            stopRun: function () {
                if (this.timer) {
                    win.clearInterval(this.timer);
                }
            },
            nextRun: function () {
                if (this.index > this.len - 1) {
                    this.index = 0;
                    this.listBox.css('left', -this.index * 100 + '%');
                }
                this.index++;
                this.runByIndex();
            },
            prevRun: function () {
                if (this.index < 1) {
                    this.index = this.len;
                    this.listBox.css('left', -this.index * 100 + '%');
                }
                this.index--;
                this.runByIndex();
            },
            bannerBoxHoverEvent: function () {
                var _this = this;
                _this.bannerBox.hover(function () {
                    _this.stopRun();
                }, function () {
                    _this.autoPlay();
                });
            },
            pagesClickEvent: function () {
                var _this = this;
                _this.pages.click(function () {
                    if (!_this.isClicked) {
                        _this.index = $(this).index();
                        _this.runByIndex();
                    }
                });
            },
            prevBtnClickEvent: function () {
                var _this = this;
                _this.prevBtn.click(function () {
                    if (!_this.isClicked) {
                        _this.isClicked = true;
                        _this.prevRun();
                    }
                });
            },
            nextBtnClickEvent: function () {
                var _this = this;
                _this.nextBtn.click(function () {
                    if (!_this.isClicked) {
                        _this.isClicked = true;
                        _this.nextRun();
                    }
                });
            }
        });
        banner.init = function (obj) {
            for (var i = 0, len = obj.length; i < len; i++) {
                new this(obj[i]);
            }
        };
        win.MySelfBanner = banner;
    })(window, $);

    //实例化插件
    MySelfBanner.init($('.banner-box'));
</script>
</body>
</html>