JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:31:38

JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼

JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼:前言 Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費(fèi)、穩(wěn)定、使用簡單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！本文詳細(xì)的給大家介紹了關(guān)于J

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼:前言 Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費(fèi)、穩(wěn)定、使用簡單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！本文詳細(xì)的給大家介紹了關(guān)于J

前言

Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費(fèi)、穩(wěn)定、使用簡單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！

本文詳細(xì)的給大家介紹了關(guān)于JS用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

先上效果圖

使用的是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>

總結(jié)

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

JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：幻燈片 js 示例

熱門焦點(diǎn)

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼

JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼

JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼

最新推薦

猜你喜歡

熱門推薦