码迷,mamicode.com
首页 > 其他好文 > 详细

走马灯一般的轮播图

时间:2017-09-30 17:53:46      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:splay   call   images   数字   items   eve   没有   中秋   scale   

技术分享

 

思路:
轮播图,首选就是swiper,在此基础上改,但是撸了一遍API发现并没有类似的,所以只能自己改CSS了。
小弟不才 直接上干货了。
SCSS方面:

.swiper-slide {
    text-align: center;
    font-size: 18px;
    // background: red;
    width: 605px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*缩放*/
    -webkit-transition: 1000ms;
    -moz-transition: 1000ms;
    -ms-transition: 1000ms;
    -o-transition: 1000ms;
    transition: 1000ms;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-backface-visibility: hidden;
    opacity: 0.3;
    border-radius:10px;
    overflow:hidden;

    img{
      display:block;
      width:605px;
      height:300px;
    }
    &.swiper-slide-active{
      -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    }
}

dom结构:

<div class="swiper-container" id=‘swiper‘>
            <div class="swiper-wrapper">
                
                <div class="swiper-slide">
                    <a href="">
                        <img src="" alt="">
                    </a>
                </div>
            <!-- 轮播里面 -->
            </div>
            <div class="swiper-pagination top_right"></div><!-- index 数字显示 -->
            <div class=‘top_left‘>淳朴老味道 优选中秋月</div><!--设计需要的标题 -->
        </div>

 js部分:

var swiper = new Swiper(‘.swiper-container‘, {
            pagination: ‘.swiper-pagination‘,
            centeredSlides: true,
            initialSlide :0,
            loop:true,
            paginationType : ‘fraction‘,
            slidesPerView: ‘auto‘,
            preventClicks : false,
            autoplay : 3000,
            speed:1000,
        });

设计图:
技术分享

 结束语:
你们用的时候记得引入JQ swiper.min.js还有swiper.css啊!!!

走马灯一般的轮播图

标签:splay   call   images   数字   items   eve   没有   中秋   scale   

原文地址:http://www.cnblogs.com/Amcc/p/7615500.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!