jquery手寫一個插件組件

先看下效果吧：

 插件代碼：

(function(){
    
    $.fn.indexBanner = function (options) {
        //2.將調用時候傳過來的參數和default參數合併
        options = $.extend({}, $.fn.indexBanner.defaults, options || {});
        //3.添加默認值
        var target = $(this);
        target.empty();
        if(options.images.length>0){
            var bannerContent = '<div class="poster-banner">';
            var slideContent = '<div class="poster-slide">';
            for(var i=0,len=options.images.length;i<len;i++){
                bannerContent += '<div class="banner-item"><img src="' + options.images[i].src + '"><div class="banner-title">' + options.images[i].title + '</div></div>';
                slideContent += '<div class="slide-item"><img src="' + options.images[i].src + '"><div class="slide-mask"></div></div>';
            }
            bannerContent += '</div>';
            slideContent += '</div>';

            target.append(bannerContent);
            target.append(slideContent);
        }

        var indexInter = "1";
        init(target, options);
        
        $(document).on("click",".poster-slide .slide-item", function(){
            $(this).addClass("active").siblings().removeClass("active");
            options.current = $(this).index();
            target.find(".poster-banner").children().eq(options.current).addClass("active").siblings().removeClass("active");
            target.find(".poster-slide").children().eq(options.current).addClass("active").siblings().removeClass("active");
            clearInterval(indexInter);
            indexInter = "";
            init(target, options);
        })

        function init(target, data) {
            if(indexInter){
                target.find(".poster-banner").children().eq(0).addClass("active").siblings().removeClass("active");
                target.find(".poster-slide").children().eq(0).addClass("active").siblings().removeClass("active");
            }
            indexInter = setInterval(function(){
                if(options.current==(data.images.length-1)){
                    options.current = 0;
                }else{
                    options.current++;
                }
                target.find(".poster-banner").children().eq(options.current).addClass("active").siblings().removeClass("active");
                target.find(".poster-slide").children().eq(options.current).addClass("active").siblings().removeClass("active");
                
            }, data.duration);
        }
    }
     //6.默認參數列表
    $.fn.indexBanner.defaults = {
        duration: 3000,
        current: 0,
        images: [],
    };

})()

css和html:

// css
.poster-main{
    width: 1000px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.poster-main .poster-banner{
    flex: 1;
    width: 840px;
    height: 300px;
    overflow: hidden;
    position: relative;
}
.poster-main .poster-banner .banner-item{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.4s;
    opacity: 0;
}
.poster-main .poster-banner .banner-item .banner-title{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    padding-top: 20px;
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; */
    color: #ffffff;
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
    background: -webkit-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
    background: -o-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
    background: -ms-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
}
.poster-main .poster-banner .banner-item.active{
    opacity: 1;
    z-index: 99;
}
.poster-banner .banner-item img{
    width: 100%;
    height: 100%;
}
.poster-main .poster-slide{
    width: 160px;
    padding-left: 5px;
    height: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.poster-main .poster-slide .slide-item{
    width: 155px;
    height: 71px;
    position: relative;
    transition: all 0.4s;
}
.poster-main .poster-slide .slide-item .slide-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: rgba(255,255,255,0.5);
}
.poster-main .poster-slide .slide-item.active{
    /* transform: scale(1.11,1.11); */
    box-shadow: 0px 0px 4px 2px #999;
}
.poster-main .poster-slide .slide-item.active .slide-mask{
    background-color: transparent;
}
.poster-main .poster-slide .slide-item img{
    width: 100%;
    height: 100%;
}


// html
<div id="indexBanner" class="poster-main">
                    
</div>

使用方法：

$("#indexBanner").indexBanner({
   images: [
       { src: './image/banner/banner_01.jpg', title: "這是第一個Banner標題，"},
       { src: './image/banner/banner_02.jpg', title: "這是第二個Banner標題，這是第二個Banner標題，這是第二個Banner標題，"},
       { src: './image/banner/banner_03.jpg', title: "這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，這是第三個Banner標題，"},
       { src: './image/banner/banner_04.jpg', title: "這是第四個Banner標題，這是第四個Banner標題，這是第四個Banner標題，這是第四個Banner標題，"},
   ]
});