仿臭美app滑动

最新推荐文章于 2022-12-27 15:53:56 发布

脚下的黑珍珠号

最新推荐文章于 2022-12-27 15:53:56 发布

阅读量2.1k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/like_jack/article/details/78835314

版权

css 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

就按我下面的复制就行，图片自己找一下吧。
这里写图片描述

choumei.min.css

@charset "utf-8";*{margin:0;padding:0}html{height:100%}body{height:100%;background:url(../images/shouye_nvsheng_bg.png);background-size:100% 100%}#header img{width:100%}.swiper-container{width:100%;-webkit-perspective:1200px;-moz-perspective:1200px;-ms-perspective:1200px;perspective:1200px}.swiper-wrapper{margin-top:10px}.swiper-slide{width:80%;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-slide .main-img{width:80%;margin:0 auto;display:block}#pagination{position:absolute;bottom:100px;width:100%}#pagination .swiper-pagination-bullet{width:9.5%;float:left;margin:0 0 0 6.15%;background:0;opacity:1}.swiper-pagination-bullet i{background:#41203f;width:24px;height:24px;line-height:24px;font-size:12px;border-radius:50px;display:block;font-style:normal;text-align:center;margin:0 auto;color:#f5b55c}.swiper-pagination-bullet-active i{-webkit-transform:scale(1.5);background:url(../images/shouye_nvsheng_huangseb.png) no-repeat center 50%;background-size:auto 100%;color:#815d4b}@media screen and (min-height:481px){.swiper-wrapper{margin-top:20px}#pagination{bottom:110px}}@media screen and (min-height:569px){.swiper-wrapper{margin-top:40px}#pagination{bottom:120px}.swiper-pagination-bullet i{width:30px;height:30px;line-height:30px;font-size:15px}}#footer{position:absolute;bottom:0}#footer img{width:100%;display:block}

swiper.min.css（这个自己下载）

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--Swiper3.0.4-->
    <meta name="viewport" content="initial-scale=1">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/choumei.min.css">
    <style>
    </style>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="images/shouye_nvsheng_washblow_one.png" class="main-img"></div>
        <div class="swiper-slide"><img src="images/shouye_nvsheng_washcutblow_two.png" class="main-img"></div>
        <div class="swiper-slide"><img src="images/shouye_nvsheng_hairperm_three.png" class="main-img"></div>
        <div class="swiper-slide"><img src="images/shouye_nvsheng_hairdye_four.png" class="main-img"></div>
        <div class="swiper-slide"><img src="images/shouye_nvsheng_haircare_five.png" class="main-img"></div>
        <div class="swiper-slide"><img src="images/shouye_nvsheng_packeage_six.png" class="main-img"></div>
    </div>

</div>
<div class="swiper-pagination" id="pagination"></div>
<script src="js/swiper-3.4.2.min.js"></script>
<script src="js/choumei.min.js"></script>
</body>
</html>

swiper-3.4.2.min.js(自己引用)

choumei.min.js

var mySwiper=new Swiper(".swiper-container",{slidesPerView:"auto",loop: true,centeredSlides:!0,watchSlidesProgress:!0,pagination:".swiper-pagination",paginationClickable:!0,onProgress:function(a){var b,c,d;for(b=0;b<a.slides.length;b++)c=a.slides[b],d=c.progress,scale=1-Math.min(Math.abs(.2*d),1),es=c.style,es.opacity=1-Math.min(Math.abs(d/2),1),es.webkitTransform=es.MsTransform=es.msTransform=es.MozTransform=es.OTransform=es.transform="translate3d(0px,0,"+-Math.abs(150*d)+"px)"},onSetTransition:function(a,b){for(var c=0;c<a.slides.length;c++)es=a.slides[c].style,es.webkitTransitionDuration=es.MsTransitionDuration=es.msTransitionDuration=es.MozTransitionDuration=es.OTransitionDuration=es.transitionDuration=b+"ms"}});

脚下的黑珍珠号

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
仿臭美app滑动

就按我下面的复制就行，图片自己找一下吧。 choumei.min.css@charset "utf-8";*{margin:0;padding:0}html{height:100%}body{height:100%;background:url(../images/shouye_nvsheng_bg.png);background-size:100% 100%}#header img{width:
复制链接

扫一扫