【前端】使用Swiper顯示正方體,左右翻轉輪播圖

阿新 • • 發佈：2019-01-19

今天的輪播圖,和往常的有一點點不同哦!可以說是有一點點的3D效果!因為他在運動的時候,是以正方體的樣子左右滾動的;
先引外掛:

<link rel="stylesheet" href="swiper.css">
<script src="swiper.js"></script>

程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
 
    <link rel="stylesheet" href="swiper.css">
 
    <style>
    /*樣式*/
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    img{
        width: 100%;
        height: 100%;
    }
    .swiper-container {
        width: 500px;
        height: 500px;
        position: absolute;
        left: 45%;
        top: 35%;
        margin-left: -150px;
        margin-top: -150px;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
    }
    </style>
</head>
<body>
<!-- Swiper輪播圖 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
 
    <script src="swiper.js"></script>
 
   <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
         
        //迴圈 往返的動
        loop:true,
                //白點不能點選
        autoplayDisableOnInteraction:false,
         
        effect: 'cube',
        grabCursor: true,
        cube: {
            shadow: true,
            slideShadows: true,
            shadowOffset: 20,
            shadowScale: 0.94
        }
    });
    </script>
</body>
</html>

【前端】使用Swiper顯示正方體,左右翻轉輪播圖

今天的輪播圖,和往常的有一點點不同哦!可以說是有一點點的3D效果!因為他在運動的時候,是以正方體的樣子左右滾動的; 先引外掛:<link rel="stylesheet" href="swiper.css"> <script src="swiper.js"

web前端端技術詳細解析左右滑動輪播圖

首先，在解析輪播圖的實現原理之前，我們得知道什麼是輪播圖。顧名思義，輪播圖就是在網頁中能夠迴圈播放並且可以手動切換的圖片。輪播圖一般作為banner出現在網頁頭部靠下的位置，用以向用戶展示一些比較重要或熱門的東西。輪播圖的播放效果有很多種，今天我們只取其中一種進行原理解析，因為雖然效果略有不同，但

【vue 元件 mint-ui】看了一下原始碼,給輪播圖Swiper封裝自定義跳轉的函式

mint-ui 自身提供了前一頁，後一頁的function,這裡由於專案需求,點選任意tab都可跳轉到相應的圖片,所以自己封裝了一個function:switchCar。 Usage import Mint from ‘mint-ui’;

【CSS3】選擇器-純css實現輪播

ica 焦點集合 meta 表示 style disable 設置 :active CSS選擇器：基本選擇器：通配符選擇器：*；元素選擇器：元素標簽； class選擇器：相當於身份證上的名稱； id選擇器：相當於身份證號（唯一性）；多元素組合選擇器

【javaweb】JS實現簡單的圖片輪播

需求：每隔3秒動態迴圈切換一組圖片定時輪播一組圖片步驟分析：（1）確定事件：文件載入完成的事件onload

【Android】三行程式碼實現一個輪播BannerView

自己簡單封裝了一個帶hint的輪播ViewPager，用來展示app首頁的Banner，先看效果圖吧。 ezgif-1-437f7aee24.gif dependencies（依賴） compile 'com.coldmoqiuli:banners:1.0.0'

vue2.0引用vue-awesome-swiper外掛實現左右滑動輪播效果

首先需要下載依賴npm install vue-awesome-swiper --save 同時引入css樣式 <link rel="stylesheet" href="/static/css/swiper.min.css" charset="utf-8">

簡單的左右滾動輪播圖

nsf javascrip pan position 個數 webkit translate over gin <!DOCTYPE html> <html lang="en"> <head> <meta chars

左右焦點輪播圖（2）

顧名思義，這個輪播圖只有左右兩個焦點，只能左右滑動。一、結構 <div id="box" class="all"> <div class="ad"> <ul id="imgs"> <li><img src="

利用swiper外掛實現移動端輪播圖

準備： swiper.min.css swiper.min.js swiper.min.css： head 標籤內引入 swiper.min.js：標籤前引入 CSS 部分 /* swiper start*/ .swiper-container {

左右運動輪播圖

htm auto star style 開關 seo gin font space <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/h

【前端】設定好CSS樣式動態新增元素會按照樣式顯示

這篇就是簡單記錄下一個小點：設定好CSS樣式先，然後動態生成元素，元素可以按照CSS樣式顯示，只要對應到相應的規則即可。 <!DOCTYPE html> <html> <head> <title>Grid Layout Tes

【前端】引用別的網站的圖片顯示403

在網上查了好久都說是沒有加<meta name="referrer" content="no-referrer"/> 然而我的不是這個原因所引用圖片的網站是https的我寫的圖片

【C語言練習題】二進位制位模式左右翻轉輸出

《C與指標》5.3題問題實現一個函式 reverse_bits 將變數value的二進位制位模式從左到右變換一下後的值返回。在32位機器上25這個值包含下列各位： 00000000000000000000000000011001

【前端】【html/css】前端學習之路（五）：標籤顯示模式（display）

標籤的型別(顯示模式) HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。1.塊級元素（block-level）每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。總而言之就是比較霸

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性避免 ive gets type turn jQuery實現瀑布流效果何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

【前端】JavaScript

sea 模仿嘗試 sub word number 封裝得到整數一、JavaScript概述　　1.JavaScript的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名Script

【前端】Vue.js經典開源項目匯總

查詢可見專業 codec ssa mark 高級 coffee init Vue.js經典開源項目匯總原文鏈接：http://www.cnblogs.com/huyong/p/6517949.html 　　Vue是什麽？　　Vue.js（讀音 /vju?/, 類似

【前端】vue.js實現按鈕的動態綁定

case ctype html 們的 ast pre cal 防止得到 vue.js實現按鈕的動態綁定實現效果：實現代碼以及註釋： <!DOCTYPE html> <html> <head> <title>按鈕

【前端】react學習階段總結，學習react、react-router與redux的這些事兒

行程 clas 目前 webpack body src 控制 return 體驗前言　　借用阮一峰的一句話：真正學會 React 是一個漫長的過程。這句話在我接觸react深入以後，更有感觸了。整個react體系都是全新的，最初做簡單的應用，僅僅使用react-to

【前端】使用Swiper顯示正方體,左右翻轉輪播圖

相關推薦