基於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 (data) {
            // 拼接頁面元素
            var ulli = '';
            var olli = '';
            for (var i = 0; i < data.length; i++) {
                ulli += '<li><img src="' + data[i] + '"></li>';
                olli += '<li></li>';
            }
            var $ul = $('<ul>' + ulli + '</ul>');
            var spans = '<span class="prev"><</span>' + '<span class="next">></span>';
            var $ol = $('<ol>' + olli + '</ol>');
            $(this).append($ul).append(spans).append($ol);
            // 簡化程式碼長度
            var $Ulli = $(this).children('ul').children();
            var $Olli = $(this).children('ol').children();
            //新增css樣式
            //盒子css樣式
            $(this).css({
                width: 590,
                height: 470,
                margin: '50px auto',
                position: 'relative'
            });
            // ul樣式
            $Ulli.css({
                position: 'absolute',
                top: 0,
                left: 0,
                display: 'none'
            });
            //span  樣式
            $(this).children('span').css({
                width: 28,
                height: 50,
                position: 'absolute',
                top: '50%',
                marginTop: -25,
                backgroundColor: ' rgba(0, 0, 0, .3)',
                fontZize: 20,
                fontFamily: '"黑體"',
                textAlign: 'center',
                lineHeight: '50px',
                color: 'white',
                cursor: 'pointer'
            });

            $(this).children('.prev').css('left', 0);
            $(this).children('.next').css('right', 0);
            $(this).children('ol').css({
                position: 'absolute',
                bottom: 30,
                left: 60

            });
            //ol li  樣式
            $Olli.css({

                float: 'left',
                width: 10,
                height: 10,
                borderRadius: '50%',
                border: ' 3px solid #ccc',
                marginRight: 6
            });
            // 顯示和新增初始樣式
            $Ulli.eq(0).show();
            $Olli.eq(0).addClass('active');

            // 封裝函式 圖片淡入和淡出
            function play() {
                index = index > data.length - 1 ? 0 : index;
                index = index < 0 ? data.length - 1 : index;
                $Ulli.eq(index).fadeIn().siblings().fadeOut();
                $Olli.eq(index).addClass('active').siblings().removeClass('active')
            }

            $('ul>li').eq(0).show();
            var index = 0;
            var timer = null;
            // 定時播放圖片
            timer = setInterval(function () {
                index++;
                play()
            }, 1500);
            // 小圓點使用
            $Olli.mouseenter(function () {
                index = $(this).index();
                play()
            });
            // 上一張
    $(this).children('.prev').on('click', function () {
        index--;
        play()
    });
    // // 下一張
    $(this).children('.next').on('click', function () {
        index++;
        play()
    });
    // 滑鼠離開和進入
    $(this).hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval(function () {
            index++;
            play()
        }, 1500);
    });
    }
    });
    $('.box1').lunbo(data);
</script>

大家如果看到有什麼不對的地方可以評論一起來學習。。希望對大家有用謝謝。