先看下效果吧：

 插件代码：

(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标题，"},]
});