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



132 526 176



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



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


热门标签: 顶部悬浮 底部悬浮 滚动导航菜单 浮动导航菜单 导航切换 右键菜单 图片头像上传 滚动切换 图片广告 文字提示框 文件上传 图片滚动 对联广告 图片切换 提示框/弹出层 文本框 文字滚动 文字切换 layer 下拉框 叠加浮动层 背景切换 lightbox 复选 图片文字滚动 手风琴 单选 全屏滚动 Tooltip工具提示框 选项卡自动切换 登录框 浮动提示框 页面滚动 视频切换 注册框 html5弹窗动画 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动流动 滚动切换 滑动选项卡切换 悬浮浮动漂浮 自动滚动图片轮播 弹出层拖动 选项卡切换 滑动手风琴 窗口提示框 浮动提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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