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

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

这是一款jQuery基于bootstrap制作左右按钮控制图片滚动,支持删除图片列表。点击弹出放大图片幻灯片预览效果,预览时可手动删除图片功能。

使用方法

1
2
3
4
在页面引入以下jquery-3.2.1.min.js、slick.js、bootstrap.min.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<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>

文件信息:

    1

    发表评论