Swiper製作3d旋轉木馬輪播
阿新 • • 發佈：2019-02-04
全部程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Swiper----3d旋轉木馬輪播</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/zepto.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/swiper.min.css"> <style> body, html { min-width: 320px; max-width: 750px; height: 100%; } header { width: 100%; height: 16.25rem; background: url("images/banner.png") no-repeat; background-size: 100% 100%; } header .swiper-container { width: 95%; padding-top: 0.5rem; } header .swiper-slide { background-position: center; background-size: 130% 120%; width: 60%; height: 15rem; } header .swiper-slide img { display: block; width: 100%; height: 15rem; } header .swiper-button-next, .swiper-button-prev { top: 5rem; width: 10%; height: 7rem; } header .swiper-button-next { background: url("images/right.png") no-repeat 100% 2.5rem; } header .swiper-button-prev { background: url("images/left.png") no-repeat 0 2.5rem; } </style> </head> <body> <div class="index"> <!-- 輪播 --> <header> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://download2.qcplay.com/web/sgzdz/Wap/guide2/images/banner_01.png" alt="圖片載入失敗" title="宣傳圖片"> <span></span> </div> <div class="swiper-slide"> <img src="http://download2.qcplay.com/web/sgzdz/Wap/guide2/images/banner_02.png" alt="圖片載入失敗" title="宣傳圖片"> <span></span> </div> <div class="swiper-slide"> <img src="http://download2.qcplay.com/web/sgzdz/Wap/guide2/images/banner_03.png" alt="圖片載入失敗" title="宣傳圖片"> <span></span> </div> <div class="swiper-slide"> <img src="http://download2.qcplay.com/web/sgzdz/Wap/guide2/images/banner_04.png" alt="圖片載入失敗" title="宣傳圖片"> <span></span> </div> <div class="swiper-slide"> <img src="http://download2.qcplay.com/web/sgzdz/Wap/guide2/images/banner_05.png" alt="圖片載入失敗" title="宣傳圖片"> <span></span> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </header> </div> <script src="js/swiper.min.js"></script> <script> // 輪播 var swiper = new Swiper('.swiper-container', { loop : true, pagination: '.swiper-pagination', effect: 'coverflow', grabCursor: true, centeredSlides: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', slidesPerView: 'auto', coverflow: { rotate: 0,// 旋轉的角度 stretch: 100,// 拉伸 圖片間左右的間距和密集度 depth: 150,// 深度 切換圖片間上下的間距和密集度 modifier: 3,// 修正值 該值越大前面的效果越明顯 slideShadows : false// 頁面陰影效果 } }); </script> </body> </html>