JS中利用swiper實現3d翻轉幻燈片實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:31:38

JS中利用swiper實現3d翻轉幻燈片實例代碼

JS中利用swiper實現3d翻轉幻燈片實例代碼:前言 Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！本文詳細的給大家介紹了關于J

推薦度：

點擊下載本文 文檔為doc格式

導讀JS中利用swiper實現3d翻轉幻燈片實例代碼:前言 Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！本文詳細的給大家介紹了關于J

前言

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

本文詳細的給大家介紹了關于JS用swiper實現3d翻轉幻燈片的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

先上效果圖

使用的是swiper3.0版本coverflow效果，源碼如下

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="utf-8">
 <title>Swiper demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
 <!-- Link Swiper's CSS -->
 <link  rel="external nofollow" rel="stylesheet">
 <!-- Demo styles -->
 <style>
 body {
 background: #fff;
 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 font-size: 14px;
 color: #000;
 margin: 0;
 padding: 0;
 }
 .swiper-container {
 width: 100%;
 padding-top: 50px;
 padding-bottom: 50px;
 }
 .swiper-slide {
 background-position: center;
 background-size: cover;
 height: 170px;
 width: 130px!important;
 }
 </style>
</head>
<body>
 <!-- Swiper -->
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
 </div>
 <!-- Swiper JS -->
 <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.js"></script>
 <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.js"></script>
 <!-- Initialize Swiper -->
 <script>
 var mySwiper = new Swiper('.swiper-container', {
 effect: 'coverflow',
 slidesPerView: 2,
 centeredSlides: true,
 coverflow: {
 rotate: 0,
 stretch: 30,
 depth: 400,
 modifier: 1,
 slideShadows: true
 }
 })
 </script>
</body>
</html>

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS中利用swiper實現3d翻轉幻燈片實例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：幻燈片 js 示例

熱門焦點

JS中利用swiper實現3d翻轉幻燈片實例代碼

JS中利用swiper實現3d翻轉幻燈片實例代碼

JS中利用swiper實現3d翻轉幻燈片實例代碼

最新推薦

猜你喜歡

熱門推薦