<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
<title>首页</title>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js"></script>
//1rem = 100px;
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<style>
* {
padding: 0;
margin: 0;
font-size: 0.2rem;
color: #333;
}
html {
background: #fff;
}
a {
text-decoration: none;
}
body {
width: 100%;
margin: 0 auto;
position: relative;
background: #ccc;
overflow: hidden;
}
img {
width: 100%;
border: 0;
}
li {
list-style: none;
}
.head-top {
height: 0.36rem;
position: fixed;
top: 0;
left: 0;
text-align: center;
width: 100%;
line-height: 0.36rem;
}
/* .swiper-containee {
max-width: 640px;
} */
#nav {
margin-top: 36px;
border-bottom: 1px solid #999;
padding: 10px;
font-size: 0.14rem;
}
#nav li {
width: 20% !important;
text-align: center;
}
.active-nav {
color: orangered;
}
.active-nav a {
color: orangered;
border-bottom: 1px solid red;
}
.active{
background-color: red;
}
</style>
</head>
<body>
<button type="button" class="btn" data-index='0' onclick="slideToLoop(this)">按钮</button>
<button type="button" class="btn" data-index='1' onclick="slideToLoop(this)">按钮2</button>
<div id="header">
<div class="head-top">
<h3>商品分类</h3>
</div>
<div id="nav" class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide active-nav"><a href="javascript:;">正前</a></li>
<li class="swiper-slide"><a href="javascript:;">左前</a></li>
<li class="swiper-slide"><a href="javascript:;">右前</a></li>
<li class="swiper-slide"><a href="javascript:;">左后</a></li>
<li class="swiper-slide"><a href="javascript:;">右后</a></li>
<li class="swiper-slide"><a href="javascript:;">正前</a></li>
<li class="swiper-slide"><a href="javascript:;">左前</a></li>
<li class="swiper-slide"><a href="javascript:;">左后</a></li>
<li class="swiper-slide"><a href="javascript:;">右后</a></li>
<li class="swiper-slide"><a href="javascript:;">右后</a></li>
</ul>
</div>
</div>
<div id="page" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slidepage">手机</div>
<div class="swiper-slide slidepage">厨具</div>
<div class="swiper-slide slidepage">数码</div>
<div class="swiper-slide slidepage">家纺</div>
<div class="swiper-slide slidepage">生鲜</div>
<div class="swiper-slide slidepage">家用电器</div>
<div class="swiper-slide slidepage">食品饮料</div>
<div class="swiper-slide slidepage">电脑/办公</div>
<div class="swiper-slide slidepage">家用日用</div>
<li class="swiper-slide"><a href="javascript:;">右后</a></li>
</div>
</div>
<script>
var myNav = new Swiper('#nav', {
//导航条之间的距离
spaceBetween: 10,
//设置slider容器能够同时显示的slides数量,可设置个数(1,2,3,4,5),auto最好设置width: x% !important;
slidesPerView :'auto',
//进度条
watchSlidesProgress : true,
//与上配合使用
watchSlidesVisibility : true,
on:{
tap: function(){
//点击时获取内容页index，跳转容器
myPage.slideTo( myNav.clickedIndex)
}
}
})
var myPage = new Swiper('#page', {
on: {
//swiper从当前slide开始过渡到另一个slide时执行
slideChangeTransitionStart: function() {
updateNavPosition()
},
slideChangeTransitionEnd: function() {
var activeIndex = this.activeIndex;//切换结束时，告诉我现在是第几个slide
reverseSlideToLoop(activeIndex)
}
}
})
//点击按钮跳转相对slide容器
function slideToLoop(el) {
var index =$(el).attr('data-index');
myNav.slideToLoop(index, 100, false);
$('#nav .swiper-slide').eq(index).addClass('active-nav').siblings().removeClass('active-nav');
myPage.slideToLoop(index, 100, false);
}
//反向跳转 根据容器 跳转相对导航栏
function reverseSlideToLoop(index){
$('.btn').eq(index).addClass('active').siblings().removeClass('active')
}
function updateNavPosition(){
$('#nav .active-nav').removeClass('active-nav');
var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
if (activeNav.index()>myNav.activeIndex) {
var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
myNav.slideTo(activeNav.index()-thumbsPerNav)
}
else {
myNav.slideTo(activeNav.index())
}
}
}
</script>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)