本文实例为大家分享了jquery实现简单的swiper轮播预览原图的具体代码,供大家参考,具体内容如下
最近项目中用到的一个效果,简单记录一下
效果图:
源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>swiper+jq实现预览原图效果</title> <!-- 引入swiper样式 --> <link rel="stylesheet" type="text/css" href="https://www.atool.online/article/css/swiper.min.css" /> <style type="text/css"> .swiper1 { width: 80%; } .img-popup { display: none; } .img-popup .shade { position: fixed; 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="https://www.atool.online/article/img/banner.png" alt="" width="100%" > </div> <div data-img="img/banner2.png" class="swiper-slide imgTap"> <img src="https://www.atool.online/article/img/banner2.png" alt="" 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> </div> </body> <!-- 引入jquery和swiper js --> <script src="https://www.atool.online/article/js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.atool.online/article/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() //允许滚动 $("body").css("overflow","initial") }) }) </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。