<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./css/swiper-bundle.min.css" />
<link rel="stylesheet" href="./css/swiper.css" />
<!-- Swiper JS -->
<script src="./js/jquery.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<!-- Demo styles -->
<style>
</style>
</head>
<body>
<div class="top-nav lt0 w100 one hoverS">
<a class="logo fl"><img src="image/logo.png"></a>
<dd class="fr">
<a class="fl hoverS" v-href="true" href="">首页 </a>
<a class="fl hoverS" v-href="true" href="">新闻资讯</a>
<a class="fl hoverS" href="">游戏产品</a>
<a class="fl hoverS" v-href="true" href="">关于我们 </a>
<span class="fl pr" v-href="true">加入我们
<label class="pa w100">
<a class="hoverS fl hoverS w100" v-href="true" href="">社会招聘</a>
<a class="hoverS fl hoverS w100" v-href="true" href="">校园招聘</a>
</label>
</span>
<a class="fl hoverS" v-href="true" href="">商务合作</a>
</dd>
</div>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video id="video-top" width="100%" height="" autoplay muted="muted" loop="loop">
<source src="http://www.taolegame.com/Public/web/images/taole/bg.mp4" type="video/mp4">
</source>
</video>
<div class="pa slogan"><img src="http://www.taolegame.com/Public/web/images/taole/slogan.png"
width="100%"></div>
</div>
<div class="swiper-slide">
<div class="game-swiper2 swiper pa wh100 lt0">
<div class="swiper-wrapper">
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g7.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g6.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g5.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g4.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g3.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g2.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g1.png"></div>
</div>
<div class="game-nav pa w100">
<ul>
<li class="yao"><img src="http://www.taolegame.com/Public/web/images/taole/g7.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g6.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g5.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g4.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g3.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g2.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g1.png"></li>
</ul>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="game-swiper3 swiper pa wh100 lt0">
<div class="swiper-wrapper">
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g1.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g2.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g3.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g4.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g5.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g6.png"></div>
<div class="swiper-slide"><img
src="http://www.taolegame.com/Public/web/images/taole/g7.png"></div>
</div>
<div class="game-nav pa w100">
<ul>
<li class="yao"><img src="http://www.taolegame.com/Public/web/images/taole/g1.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g2.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g3.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g4.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g5.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g6.png"></li>
<li><img src="http://www.taolegame.com/Public/web/images/taole/g7.png"></li>
</ul>
</div>
</div>
</div>
<div class="swiper-slide"><img src="./image/4.jpg"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Initialize Swiper -->
<script>
document.title = 'Swiper 966'
var topNav = document.querySelector('.top-nav')
var swiper = new Swiper(".mySwiper", {
// autoplay: true, //可选选项，自动滑动
direction: "vertical", // 垂直
slidesPerView: 1,
speed: 266,
spaceBetween: 30,
initialSlide: 0, // 0 = 1页
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
bulletActiveClass: 'my-bullet', //需设置.my-bullet样式
},
on: {
slideChangeTransitionEnd: function() {
this.activeIndex != 0 ? topNav.style.background = '#fefbf4' : topNav.style.background =
'none'
},
},
});
var GameSwiper2 = new Swiper('.game-swiper2', {
spaceBetween: 0,
loop: true,
on: {
slideChangeTransitionEnd: function(swiper) {
console.log(swiper)
$('.game-swiper2 .game-nav ul li').eq(swiper.realIndex).addClass('yao').siblings("li")
.removeClass(
'yao');
},
},
});
$('.game-swiper2 .game-nav ul li').click(function() {
GameSwiper2.slideToLoop($(this).index());
console.log($(this).index())
});
var GameSwiper3 = new Swiper('.game-swiper3', {
spaceBetween: 0,
loop: true,
on: {
slideChangeTransitionEnd: function(swiper) {
console.log(swiper)
$('.game-swiper3 .game-nav ul li').eq(swiper.realIndex).addClass('yao').siblings("li")
.removeClass(
'yao');
},
},
});
$('.game-swiper3 .game-nav ul li').click(function() {
GameSwiper3.slideToLoop($(this).index());
console.log($(this).index())
});
// function imgBg() {
// var Width = $(".main").width();
// var h = (Width / pageHeight) > bl ? Math.round(1080 / (1920 / Width)) : pageHeight;
// var w = Math.round(1920 / (1080 / h));
// $(".bg-img").css({
// "height": h,
// left: "50%",
// "marginLeft": -(w / 2),
// width: w
// });
// }
// imgBg();
// $(window).resize(function() {
// if (!Browser_IE) {
// pageHeight = $(window).height();
// $('.main').children('.swiper-wrapper').css('height', pageHeight * $(".main-page").length +
// $(".foot-page").height());
// $('.main').find('.main-page').css('height', pageHeight);
// MainSwiper.reInit();
// GameSwiper.reInit();
// setTimeout(function() {
// MainSwiper.swipeTo(MainSwiper.activeIndex);
// }, 100);
// }
// imgBg();
// });
</script>
</body>
</html>
JavaScript swiper.rar
需积分: 8 153 浏览量
2022-03-31
10:06:16
上传
评论
收藏 2.6MB RAR 举报
swiper.rar （13个子文件） 
swiper css 
swiper.css 3KB swiper-bundle.min.css 15KB image 
8.jpg 417KB 2.jpg 55KB 1.jpg 689KB 6.jpg 329KB 5.jpg 536KB 4.jpg 195KB
logo.png 11KB 7.jpg 420KB js jquery.min.js 93KB swiper-bundle.min.js 133KB
swiper.html 8KB
评论0