jquery实现简单的swiper轮播预览原图

2022-04-17 04:21:54 来源：易采站长站作者：

本文实例为大家分享了jquery实现简单的swiper轮播预览原图的具体代码，供大家参考，具体内容如下

最近项目中用到的一个效果，简单记录一下

效果图：

源码：

<!DOCTYPE html><html> <head>  <meta charset="utf-8" />  <title>swiper+jq实现预览原图效果</title>  <!-- 引入swiper样式 -->  <link rel="stylesheet" type="text/css" href="css/swiper.min.css" rel="external nofollow" />    <style type="text/css">   .swiper1 {    width: 80%;   }   .img-popup {    display: none;   }   .img-popup .shade {    position: fwww.easck.comixed;    top: 0;    left: 0;    width: 100%;    height: 100vh;    background-color: rgba(0,0,0,.6);    z-index: 998;   }   .img-popup .img-big {    position: fixed;    top: 50%;    left: 50%;    max-width: 100%;    z-index: 999;    transform: translate(-50%, -50%);   }  </style>   </head>  <body>   <div class="swiper-container swiper1" >   <div class="swiper-wrapper">    <!-- data-img 可随意定义 -->    <!-- ps：这样写是为了防止jq给img加点击事件有时无效的情况，但不知道什么原因造成的，欢迎大佬指点 -->    <div data-img="img/banner.png" class="swiper-slide imgTap">     <img src="img/banner.png" alt="jquery实现简单的swiper轮播预览原图" width="100%" >    </div>    <div data-img="img/banner2.png" class="swiper-slide imgTap">     <img src="img/banner2.png" alt="jquery实现简单的swiper轮播预览原图" width="100%">    </div>   </div>   <!-- Add Arrows -->   <div class="swiper-button-next swiper-button-white"></div>   <div class="swiper-button-prev swiper-button-white"></div>  </div>    <!-- 高度占位 -->  <div class="height_test" style="height: 2000px;"></div>   <!-- 原图弹窗 -->  <div class="img-popup">   <div class="shade"></div>   <div class="img-box"><img src="" class="img-big"></div>  </diqHxQcnIxwv>   </body> <!-- 引入jquery和swiper js --> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">  // banner切换  var swiper = new Swiper('.swiper1', {   navigation: {    nextEl: '.swiper-button-next',    prevEl: '.swiper-button-prev',   },   // 自动轮播   autoplay: {    // 自动切换的时间间隔，单位ms    delay: 3000,    // 用户触摸停止    disableOnInteraction: true,   },   //滚动切换的时间间隔   speed: 1000,   //设置slider容器能够同时显示的slides数量(carousel模式)   slidesPerView: 1,   // 在slide之间设置距离（单位px）。   spaceBetween: 0,   // 无限循环   loop: true,  });    $(function() {   $('.imgTap').click(function () {    //显示弹窗    $('.img-popup').show()    //获取图片路径    var img_src = $(this).attr("data-img")    console.log(img_src)    //赋值获取的路径给弹窗的img标签    $('.img-big').attr("src" ,img_src);    //禁止滚动    $("body").css("overflow","hidden")   })   $('.img-popup .shade').click(function () {    //隐藏弹窗    $('.img-popup').hide()    /qHxQcnIxw/允许滚动    $("body").css("overflow","initial")   })  }) </script></htmqHxQcnIxwl>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。