Swiper制作《奇迹觉醒》轮播图效果

分类:代码 日期:

Swiper制作《奇迹觉醒》轮播图效果

演示

简介

《奇迹觉醒》是由腾讯独家代理运营的全新 MMO 官方正版奇迹手游,游戏用更加华丽的画面,完美重现了勇者大陆、亚特兰蒂斯、天空之城等玩家熟悉的地图, 同时经典职业也将回归称霸勇者大陆。

本文将使用 Swiper 制作《奇迹觉醒》【游戏特色】部分的轮播图效果。

制作方法

HTML

<div class="wrap">
    <div class="dowebok">
        <ul class="tab">
            <li class="f01 on"></li>
            <li class="f02"></li>
            <li class="f03"></li>
            <li class="f04"></li>
            <li class="f05"></li>
        </ul>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/banner1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner3.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner4.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner5.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <img class="char0" src="images/char0.png" alt="">
    </div>
</div>

CSS

* { margin: 0; padding: 0; }
.wrap { height: 765px; background: url(images/guide_03.jpg) 50% no-repeat;}
.dowebok { position: relative; width: 1200px; margin: 0 auto; padding-top: 200px; }
.tab { position: absolute; left: 0; top: 210px; width: 255px; height: 475px; list-style-type: none; }
.tab li { height: 95px; background-image: url(images/tabnor.png); }
.tab .on { background-image: url(images/tabact.png); }
.tab .f01 { background-position: 0 0; }
.tab .f02 { background-position: 0 -95px; }
.tab .f03 { background-position: 0 -190px; }
.tab .f04 { background-position: 0 -285px; }
.tab .f05 { background-position: 0 bottom; }
.swiper-container { position: absolute; right: 105px; top: 246px; z-index: 2; width: 800px; height: 400px;}
.swiper-slide img { width: 100%; }
.char0 { position: absolute; right: -80px; top: 170px; z-index: 3; }

JavaScript

var mySwiper = new Swiper ('.swiper-container', {
    autoplay: true,
    loop: true,
    pagination: {
        el: '.swiper-pagination',
    },
    on: {
        slideNextTransitionEnd: function () {
            change (this.realIndex)
        }
    }
    
})

function change (index) {
    $('.tab li').eq(index).addClass('on').siblings().removeClass('on')
}

$('.tab li').on('click', function () {
    $(this).addClass('on').siblings().removeClass('on')
    mySwiper.slideTo($(this).index() + 1, 1000, false)
})
查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈