【前端】使用Swiper顯示正方體,左右翻轉輪播圖
先引外掛:
<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