【前端】使用Swiper显示正方体,左右翻转轮播图

来源：互联网发布：不用流量的电子狗软件编辑：程序博客网时间：2024/04/30 00:34

今天的轮播图,和往常的有一点点不同哦!可以说是有一点点的3D效果!因为他在运动的时候,是以正方体的样子左右滚动的;
先引插件:

<link rel="stylesheet" href="swiper.css"><script src="swiper.js"></script>

代码如下:

<!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">     <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"></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>

阅读全文

0 0