[代码样式]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)
})

下载

隐藏内容,您需要满足以下条件方可查看
End
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]太空设计扁平404错误页面(EPS/AI)

2020-9-10 17:14:50

脚本代码

[代码样式]Chained – jQuery/Zepto级联下拉框插件

2020-9-10 17:14:52

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索