Dann der gleiche Satz: Cuihua, der Code: Dann der gleiche Satz: Cuihua, der Code:
suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel-Tutorial zur Implementierung eines 3D-Karusselldiagramms mit Swipe

Beispiel-Tutorial zur Implementierung eines 3D-Karusselldiagramms mit Swipe

零下一度
零下一度Original
2017-06-27 09:51:073060Durchsuche

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(&#39;.swiper-container&#39;, {
        pagination: &#39;.swiper-pagination&#39;,
        
        //循环 往返的动
        loop:true,
                //小白点不能点击
		autoplayDisableOnInteraction:false,
		
        effect: &#39;cube&#39;,
        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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vue-Projektkonstruktion und praktisches Beispiel-TutorialNächster Artikel：Vue-Projektkonstruktion und praktisches Beispiel-Tutorial

In Verbindung stehende Artikel

Mehr sehen