[代码样式]Swiper制作《奇迹觉醒》轮播图效果

脚本代码
20年9月10日
编辑

简介

《奇迹觉醒》是由腾讯独家代理运营的全新 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)
})