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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

201 803 268



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



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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