1. 程式人生 > >走馬燈一般的輪播圖

走馬燈一般的輪播圖

des opacity var -i index tran logs bsp ext

技術分享

思路:
輪播圖,首選就是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啊!!!

走馬燈一般的輪播圖