点击图片出现轮播弹窗

功能：从后台给的接口中，拿到图片并渲染到页面中，点击页面图片列表中的某张图片后，出现弹窗，图片放大，并可以轮播

实现方式：

第一步：在页面引入Swiper和JQuery插件

第二步：将图片渲染到页面中

首先，在body中写一个div标签 , 用来放图片
<div class="img-all" ></div>
在<script> 调用后台接口，拿到图片字符串, 并将图片渲染到页面中，代码如下：

 var imageStr='后台数据，含有多张图片链接的字符串，调取方法这里不详细介绍';
 var imglist = imageStr.split(',');//后台给的图片字符串，一般是用','分割的，需要将字符串转换为数组
 var str='';
  for (var i = 0; i < imglist.length; i++) {
       str += `<img class="img-item"  src="${imglist[i]}"/>` //这里使用了es6拼接字符串的方法 ``

     }
     //将图片标签列表添加到第一步写的div标签中，这里使用了jquery方法
 $('.img-all').html(str)

第三步：向弹窗标签中添加轮播内容

在body中写一个div标签 , 作为弹窗
<div class="tan" style="display: none;"></div>
在<script>中，向弹窗标签动态添加轮播内容，代码如下：

	//封装成一个方法，每次点击图片后，都需要调用这个方法
   function  tanAdd() {
             var tanStr = '';
             //这里使用的是swiper插件
             tanStr += `<div class="swiper-container">
             	  <div class="swiper-wrapper">`;
             	  
               //将所有图片添加到轮播图中，imglist是包含所有图片的数组
                  for (var i = 0; i< imglist.length; i++) {
            tanStr += `<div class="swiper-slide"><img src="${imglist[i]}" alt=""></div>`
                          }
                          
             tanStr += `</div>
                 //如果需要分页器
                <div class="swiper-pagination"></div>
                  //如果需要左右切换按钮
                   <div class="swiper-button-prev"></div>
                 <div class="swiper-button-next"></div>
          		</div>`;
  						
  	//将拼接好的字符串，添加到弹窗标签中
        $('.tan').html(tanStr);

第四步：点击图片出现弹窗，图片放大，并可以轮播

给每张图片绑定点击事件，需要拿到所有的图片标签，并将它们添加到 imgClick数组中

var imgClick=$('.img-all').children(); //获取所有的图片标签，并赋值给imgClick数组
for (var i = 0; i < imgClick.length; i++) {
       let num = i; //被点击图片的下标
        arrImg[i].onclick = function () {
        			//调用在第三步中封装好的方法
                tanAdd(); //每次点击图片都会重新加载弹窗中内容
                       $(".tan").css("display", "block");//打开弹窗
                           document.documentElement.style.overflow = 'hidden';//打开弹窗后，禁止页面滚动
                       document.body.style.overflow = 'hidden'；//打开弹窗后，禁止页面滚动
                       //轮播
                        var mySwiper = new Swiper('.swiper-container', {
                        loop: true, // 循环模式选项
                           centeredSlides: true,//居中
                           initialSlide: num, //指定开始页面的下标，点击图片后，显示的第一张图片是被点击的图片
                            // 如果需要分页器
                           pagination: {
                                el: '.swiper-pagination',
                             },
                                  // 如果需要左右切换按钮
                      navigation: {
                            nextEl: '.swiper-button-next',
                           prevEl: '.swiper-button-prev',
                                   },
                                 });

                              }
                          }

注意：css样式省略了，自行补充

来源：CSDN

作者：出无间，入无朕

链接：https://blog.csdn.net/qdcainiao/article/details/103938510

标签

轮播