jquery實現(xiàn)簡單的swiper輪播預(yù)覽原圖

更新時間：2022年02月24日 16:49:09 作者：、曉揚

這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單的swiper輪播預(yù)覽原圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)簡單的swiper輪播預(yù)覽原圖的具體代碼，供大家參考，具體內(nèi)容如下

最近項目中用到的一個效果，簡單記錄一下

效果圖：

源碼：

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title>swiper+jq實現(xiàn)預(yù)覽原圖效果</title>
?? ??? ?<!-- 引入swiper樣式 -->
?? ??? ?<link rel="stylesheet" type="text/css" href="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="img/banner.png" alt="" width="100%" >
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div data-img="img/banner2.png" class="swiper-slide imgTap">
?? ??? ??? ??? ??? ?<img src="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="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,
?? ??? ??? ?//設(shè)置slider容器能夠同時顯示的slides數(shù)量(carousel模式)
?? ??? ??? ?slidesPerView: 1,
?? ??? ??? ?// 在slide之間設(shè)置距離（單位px）。
?? ??? ??? ?spaceBetween: 0,
?? ??? ??? ?// 無限循環(huán)
?? ??? ??? ?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);
?? ??? ??? ??? ?//禁止?jié)L動
?? ??? ??? ??? ?$("body").css("overflow","hidden")
?? ??? ??? ?})
?? ??? ??? ?$('.img-popup .shade').click(function () {
?? ??? ??? ??? ?//隱藏彈窗
?? ??? ??? ??? ?$('.img-popup').hide()
?? ??? ??? ??? ?//允許滾動
?? ??? ??? ??? ?$("body").css("overflow","initial")
?? ??? ??? ?})
?? ??? ?})
?? ?</script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: