特效描述: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>