欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年02月24日 16:49:09   作者：、曉揚(yáng)  
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的swiper輪播預(yù)覽原圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

最近項(xiàng)目中用到的一個(gè)效果，簡(jiǎn)單記錄一下

效果圖：

源碼：

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title>swiper+jq實(shí)現(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加點(diǎn)擊事件有時(shí)無(wú)效的情況，但不知道什么原因造成的，歡迎大佬指點(diǎn) -->
?? ??? ??? ??? ?<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',
?? ??? ??? ?},
?? ??? ??? ?// 自動(dòng)輪播
?? ??? ??? ?autoplay: {
?? ??? ??? ??? ?// 自動(dòng)切換的時(shí)間間隔，單位ms
?? ??? ??? ??? ?delay: 3000,
?? ??? ??? ??? ?// 用戶觸摸停止
?? ??? ??? ??? ?disableOnInteraction: true,
?? ??? ??? ?},
?? ??? ??? ?//滾動(dòng)切換的時(shí)間間隔
?? ??? ??? ?speed: 1000,
?? ??? ??? ?//設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)
?? ??? ??? ?slidesPerView: 1,
?? ??? ??? ?// 在slide之間設(shè)置距離（單位px）。
?? ??? ??? ?spaceBetween: 0,
?? ??? ??? ?// 無(wú)限循環(huán)
?? ??? ??? ?loop: true,
?? ??? ?});
?? ??? ?
?? ??? ?$(function() {
?? ??? ??? ?$('.imgTap').click(function () {
?? ??? ??? ??? ?//顯示彈窗
?? ??? ??? ??? ?$('.img-popup').show()
?? ??? ??? ??? ?//獲取圖片路徑
?? ??? ??? ??? ?var img_src = $(this).attr("data-img")
?? ??? ??? ??? ?console.log(img_src)
?? ??? ??? ??? ?//賦值獲取的路徑給彈窗的img標(biāo)簽
?? ??? ??? ??? ?$('.img-big').attr("src" ,img_src);
?? ??? ??? ??? ?//禁止?jié)L動(dòng)
?? ??? ??? ??? ?$("body").css("overflow","hidden")
?? ??? ??? ?})
?? ??? ??? ?$('.img-popup .shade').click(function () {
?? ??? ??? ??? ?//隱藏彈窗
?? ??? ??? ??? ?$('.img-popup').hide()
?? ??? ??? ??? ?//允許滾動(dòng)
?? ??? ??? ??? ?$("body").css("overflow","initial")
?? ??? ??? ?})
?? ??? ?})
?? ?</script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論