jQuery图片滚动幻灯片预览大图效果代码



94 375 126



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



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动选项卡 滑动切换 滚动切换 滚动条切换 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 自动滚动图片轮播 弹出层拖动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 浮动提示框 切换按钮 表单 表单美化 表单插件 表单美化插件 图片广告 图片滚动 图片滚动条 lightbox 选项卡自动切换 按钮控制 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到