然後還是那句話:翠花,上代碼: 然後還是那句話:翠花,上代碼:
今天的輪播圖,和往常的有一點點不同哦!可以說是有一點點的3D效果!因為他在運動的時候,是以正方體的樣子左右滾動的;
先引出插件:
85ca11db9a2596384621c19b0d64b376
2a0eafb106da779d21dab051a37d79dd 2cacc6d41bbb37262a98f745aa00fbf0
然後還是那句話:翠花,上程式碼:
<!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?1.1.11"> <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?1.1.11"></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>
有沒有很簡單啊!!!
#以上是Swipe實作3d輪播圖的實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!