特效描述：jQuery图片滚动 幻灯片预览大图。jQuery基于bootstrap制作左右按钮控制图片滚动，支持删除图片列表。点击弹出放大图片幻灯片预览效果，预览时可手动删除图片功能。
代码结构
1. 引入CSS
<link href="lib/slick/slick.css" rel="stylesheet" type="text/css"/> <link href="css/base.css" rel="stylesheet" type="text/css"/> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
2. 引入JS
<script src="lib/jquery-3.2.1.min.js"></script> <script src="lib/slick/slick.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script>
3. HTML代码
<!--预览图片(弹框) Modal-->
<div id="show_image" class="modal modal-show-image" aria-hidden=”true” data-backdrop=”static”>
<div class="modal-header">
<button data-dismiss="modal" class="close close-pop" type="button"> X </button>
</div>
<div class="modal-body">
<div id="myCarousel" class="carousel">
<!--轮播（Carousel）项目-->
<div class="carousel-inner carousel-inner-stand"></div>
<!--轮播（Carousel）导航-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer img-modal">
<button type="button" class="btn btn-default close close-pop" data-dismiss="modal"> 取 消 </button>
<button type="button" class="btn btn-primary" id="img_remove_modal"> 删 除 </button>
</div>
</div>
<section id="features" class="left-bottom blue thumbnail-show">
<div class="content">
<div class="slider add-remove img-list-slider"></div>
</div>
</section>
<script>
var previewLength;
var imgTempList = [
"img/118098383748c756e2o.jpg",
"img/55a09df24b97e_1024.jpg",
"img/0037037537817495_b.jpg",
"img/4499633_115051034301_2.jpg",
"img/10.jpg",
"img/4afbfbedab64034f57ca4b0ea5c379310a551db6.jpg",
"img/234970-14061922354979.jpg",
"img/0010023173266263_b.jpg"
];
//初始化
$(function () {
//图片分页展示
$('.img-list-slider').slick({
dots: true,
slidesToShow: 5,
slidesToScroll: 5
});
initEle();
//预览图片
$('.img-list-slider').on('click','.thumbnail-self .image',function (e) {
imgEnlarge(e)
});
//图片删除
$('.img-list-slider').on('click','.thumbnail-self .remove', function (e) {
imgRemove(e);
});
//预览图片时删除
$('.modal-show-image ').on('click','.img-modal #img_remove_modal', function () {
imgRemoveModal();
})
});
//dom初始化
function initEle() {
for(var i in imgTempList) {
var str="", imgTempListValue = imgTempList[i];
str = '<div class="thumbnail-self">'+
'<img class="image" alt="'+imgTempListValue+'" src="'+imgTempListValue+'" />' +
'<p class="remove" data-filename="'+imgTempListValue+'" >'+'X'+'</p>'+
'</div>';
$('.img-list-slider').slickAdd(str);
}
}
//禁止自动轮播
function carousel() {
//禁止自动轮播
$('.carousel').carousel({
interval: false
});
}
//图片预览放大
function imgEnlarge(e) {
carousel();
//获取图片长度
previewLength = $('.img-list-slider .thumbnail-self:not(.slick-cloned)').length;
var sourceSrc = "",str = "", sourceSrcArr = [];
//获取url数组
$(".img-list-slider .thumbnail-self:not(.slick-cloned) img").each(function() {
var attrSrc = $(this).attr("src");
sourceSrcArr.push(attrSrc);
});
//获取当前点击的元素url
sourceSrc = $(e.target).attr('src');
//当前url在数组中位置
var index = sourceSrcArr.indexOf(sourceSrc);
if (index > -1) {
for(var i in sourceSrcArr) {
if(i == index) {
str = '<div class="item active">'+
'<img src="'+sourceSrcArr[i]+'" class="img-self">'+
'</div>';
}else {
str = '<div class="item">'+
'<img src="'+sourceSrcArr[i]+'" class="img-self">'+
'</div>';
}
$(".carousel-inner-stand").append(str);
}
}
$("#show_image").modal('show');
//弹窗关闭清空数组
var self = this;
$('#show_image').on('hide.bs.modal', function () {
$(".carousel-inner-stand").empty();
});
}
//缩略图右上方按钮删除
function imgRemove(e) {
var imgIndex = imgTempList.indexOf(e.target.dataset.filename);
imgTempList.splice(imgIndex,1);
$('.img-list-slider').slickRemove(imgIndex);
console.log(imgTempList);
}
//预览图片时删除
function imgRemoveModal() {
if($('.carousel-inner-stand .item').hasClass('active')){
var nextElement = $('.active').next();
if(nextElement.length != 0) {
nextElement.addClass('active');
var activeFirst = $('.carousel-inner-stand .active:first');
var activeFirstImg = activeFirst.find('img').attr('src');
modalRemove(activeFirstImg,activeFirst);
}else {
$('.carousel-inner-stand .item:first').addClass('active');
var activeLast = $('.carousel-inner-stand .active:last');
var activeLastImg = activeLast.find('img').attr('src');
modalRemove(activeLastImg,activeLast);
}
}
}
//预览图片删除动作
function modalRemove(imgSrc,activeElement) {
previewLength--;
var imgIndex = imgTempList.indexOf(imgSrc);
if(previewLength > 0) {
$('.img-list-slider').slickRemove(imgIndex);
}else {
$("#show_image").modal('hide');
$('.img-list-slider').slickRemove(imgIndex);
}
imgTempList.splice(imgIndex,1);
activeElement.remove();
console.log(imgTempList);
}
</script>
