先看下效果吧:
插件代码:
(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标题,"},
]
});