Puis la même phrase : Cuihua, le code : Puis la même phrase : Cuihua, le code :
Maison > Article > interface Web > Exemple de tutoriel d'implémentation d'un graphique carrousel 3D avec Swipe
Le carrousel d'aujourd'hui est un peu différent des habituels ! On peut dire qu'il a un petit effet 3D car lorsqu'il bouge, il roule de gauche à droite en forme de cube
Présentez d'abord le plug- ; dans :
85ca11db9a2596384621c19b0d64b376
ae6cc544245a0f97f954c9eff4b55774
Encore une fois : Cuihua, ajoute le code :
<!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>
N'est-ce pas très simple !!!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!