Dann der gleiche Satz: Cuihua, der Code: Dann der gleiche Satz: Cuihua, der Code:
Heim > Artikel > Web-Frontend > Beispiel-Tutorial zur Implementierung eines 3D-Karusselldiagramms mit Swipe
Das heutige Karussell unterscheidet sich ein wenig von den üblichen! Man kann sagen, dass es einen leichten 3D-Effekt hat, denn wenn es sich bewegt, rollt es in einer Würfelform nach links und rechts -in:
85ca11db9a2596384621c19b0d64b376
2a0eafb106da779d21dab051a37d79dd ;/script>
Andererseits: Cuihua, füge den Code hinzu:
<!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>Ist das nicht ganz einfach!!!
Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Implementierung eines 3D-Karusselldiagramms mit Swipe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!