jquery實(shí)現(xiàn)簡(jiǎn)單的swiper輪播預(yù)覽原圖
本文實(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:這樣寫(xiě)是為了防止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í)有所幫助,也希望大家多多支持腳本之家。
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開(kāi)發(fā)必備
- Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播的具體實(shí)現(xiàn)
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效
- 原生js和jquery實(shí)現(xiàn)圖片輪播淡入淡出效果
- jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
- 利用jquery寫(xiě)的左右輪播圖特效
- jquery實(shí)現(xiàn)左右無(wú)縫輪播圖
相關(guān)文章
基于jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退功能
前進(jìn)與后退在瀏覽網(wǎng)頁(yè)的時(shí)候是比較常見(jiàn)的而且非常的實(shí)用,接下來(lái)為大家分享下使用jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退,感興趣的朋友可以參考下哈2013-04-04jQuery UI AutoComplete 使用說(shuō)明
在 jQuery UI 的最近更新中增加了自動(dòng)完成控件 AutoComplete,這為我們提供了又一個(gè)強(qiáng)大的開(kāi)發(fā)工具,這里介紹一下這個(gè)控件的使用方式。2011-06-06jQuery實(shí)現(xiàn)平滑滾動(dòng)頁(yè)面到指定錨點(diǎn)鏈接的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)平滑滾動(dòng)頁(yè)面到指定錨點(diǎn)鏈接的方法,涉及jquery鼠標(biāo)事件及頁(yè)面滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07基于jquery實(shí)現(xiàn)復(fù)選框全選,反選,全不選等功能
本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼,有需要的小伙伴可以參考一下2015-10-10詳解Bootstrap的iCheck插件checkbox和radio
這篇文章主要詳細(xì)介紹了Bootstrap的iCheck插件checkbox和radio的知識(shí)及bootstrap icheck獲取radio的value值的方法,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看下吧2016-08-08