分享一个基于jq定制化，封装小插件，轮播图，供大家实用

基于jq的定制化的封装小插件，轮播图，和大家分享

大家好！我是一名刚刚入门的一个前端小白，最近在学习中自己封装了一个插件，是基于jquery的一个小demo。大家可以看一下，哪里做的不足也可以评论一下，共同学习。好的，废话不多说，咱们还是上图吧！

html部分

因为大部分页面都拼接到了js部分所以，就在页面只放了一个空的div只需要再增加一个相同的盒子，和javascript里面增加一行代码，即可实现多个轮播图。

<div class="box1"></div>

css部分

这里是把轮播图样式设置好，以便于在网页中渲染个性化，大家可以根据自己的喜欢到javascript的拼接部分修改即可。

    <style>
        * {
   
            margin: 0;
            padding: 0;
        }

        ul, ol {
   
            list-style: none;
        }

        span:hover {
   
            background-color: rgba(0, 0, 0, .8);
        }

        .active {
   
            background-color: rgba(255, 255, 255, .8);
            box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, .3);
        }


    </style>

js部分

主要实现的功能都在js里面实现的，有一部分是css在里面拼接出来的，大家不喜欢的话可以删除掉，或者自己在css里面重新编写样式。在这里，大家只需要在html里面增加一个空的div，并加上类名。，在js最后使用$(’.盒子类名’).lunbo(data); 即可实现多个轮播图效果。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var data = ['图片地址自己可以修改一下', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg'];
    var data1 = ['img/3.jpg', 'img/4.jpg', 'img/5.jpg'];
    $.fn.extend({
   
        lunbo: function (d