swiper和jquery冲突怎么解决
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1" />
<title>导航左右滚动，跳转切换 </title>
<link rel="stylesheet" href="swiper-3.4.2.min.css">
/*可能需要下载swiper文件,放同级目录就可以了http://www.swiper.com.cn/download/index.html*/
</head>
<style>
*{ margin:0; padding:0; font-family: "微软雅黑";}
body{ font-size:16px; background-color:#f4f4f4;}
li{ list-style:none;}
a{ text-decoration:none; -webkit-tap-highlight-color:rgba(255,0,0,0);}
.wrap{width:100%;}
/*导航滑动*/
#topNav {
width: 100%;
overflow: hidden;
font-style:normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-weight: normal;
font-stretch: normal;
font: 0.35rem;
line-height: 100%;
background: #34026A;
}
#topNav .swiper-slide {
width:20%;
text-align:center;
padding-left: 1%;
padding-right:1%;
border-right-style: dotted;
}
#topNav .swiper-slide a div{
transition:all .3s ease;
display:block;
color: #fff;
width: 100%;
height: 100%;
padding-top: 10%;
padding-bottom: 10%;
}
#topNav .active a .sport{
transform:scale(1.1);
background-image:linear-gradient(to top,#FF8D14,#FFBA34);
border-radius: 15px 15px 0 0;
}
#topNav .active a .mw{
transform:scale(1.1);
background-image:linear-gradient(to top,#008754,#00B75A);
border-radius: 15px 15px 0 0;
}
#topNav .active a .bd{
transform:scale(1.1);
background-image:linear-gradient(to top,#712EEC,#3497E9);
border-radius: 15px 15px 0 0;
}
#topNav .active a .sp{
transform:scale(1.1);
background-image:linear-gradient(to top,#F84387,#F95ACB);
border-radius: 15px 15px 0 0;
}
#topNav .active a .mh{
transform:scale(1.1);
background-image:linear-gradient(to top,#BD00E0,#B152F5);
border-radius: 15px 15px 0 0;
}
#topNav .active a .bh{
transform:scale(1.1);
background-image:linear-gradient(to top,#FA552F,#FC7E4B);
border-radius: 15px 15px 0 0;
}
/*导航悬浮固定*/
.tabFloat{ position:fixed; top:0; left:0; z-index:100;}
/*主体内容样式*/
#div1{
background: yellow;
height: 12.5rem;
text-align: center;
}
#div2{
background: green;
height: 12.5rem;
text-align: center;
}
#div3{
background: blue;
height: 12.5rem;
text-align: center;
}
#div4{
background: rgb(248,76,161);
height: 12.5rem;
text-align: center;
}
#div5{
background: rgb(187,16,228);
height: 12.5rem;
text-align: center;
}
#div6{
background: rgb(251,100,57);
height: 12.5rem;
text-align: center;
}
@media screen and (max-width:334px){
.swiper-slide a div{ font-size:10px;}
}
</style>
<body>
<div class="wrap">
<div id="topNav" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide ">
<a class="link" >
<div class="sport">第一模块</div>
</a>
</div>
<div class="swiper-slide">
<a class="link1">
<div class="mw">第二模块</div>
</a>
</div>
<div class="swiper-slide">
<a href="#div3">
<div class="bd">第三模块</div>
</a>
</div>
<div class="swiper-slide">
<a href="#div4">
<div class="sp">第四模块</div>
</a>
</div>
<div class="swiper-slide">
<a href="#div5">
<div class="mh">第五模块</div>
</a>
</div>
<div class="swiper-slide">
<a href="#div6">
<div class="bh">第六模块</div>
</a>
</div>
</div>
</div>
<div class="tabSection" id="div1">
这是第一块
</div>
<div class="tabSection" id="div2">
这是第二块
</div>
<div class="tabSection" id="div3">
这是第三块
</div>
<div class="tabSection" id="div4">
这是第四块
</div>
<div class="tabSection" id="div5">
这是第五块
</div>
<div class="tabSection" id="div6">
这是第六块
</div>
</div>
</body>
<script src="swiper-3.4.2.min.js" type="text/javascript"></script>
/*可能需要下载swiper文件,放同级目录就可以了http://www.swiper.com.cn/download/index.html*/
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//swiper部分，为了各位方便复制我就写到一个页面中
var mySwiper = new Swiper('#topNav', {
freeMode: true,
freeModeMomentumRatio: 0.5,
slidesPerView: 'auto',
});
swiperWidth = mySwiper.container[0].clientWidth
maxTranslate = mySwiper.maxTranslate();
maxWidth = -maxTranslate + swiperWidth / 2
$(".swiper-container").on('touchstart', function(e) {
e.preventDefault()
})
mySwiper.on('tap', function(swiper, e) {
// e.preventDefault()
slide = swiper.slides[swiper.clickedIndex]
slideLeft = slide.offsetLeft
slideWidth = slide.clientWidth
slideCenter = slideLeft + slideWidth / 2
// 被点击slide的中心点
mySwiper.setWrapperTransition(300)
if (slideCenter < swiperWidth / 2) {
mySwiper.setWrapperTranslate(0)
} else if (slideCenter > maxWidth) {
mySwiper.setWrapperTranslate(maxTranslate)
} else {
nowTlanslate = slideCenter - swiperWidth / 2
mySwiper.setWrapperTranslate(-nowTlanslate)
}
$("#topNav .active").removeClass('active')
$("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active')
$("#topNav .swiper-slide").eq(swiper.clickedIndex)
})
//jquery部分
$(document).ready(function(){
$("html,body").animate({scrollTop:0});
//判断导航个数
var tabLength = $('.swiper-slide a').length;
//导航高度
var tabTop = $("#topNav").offset().top;
// console.log(tabTop)
//分类数组 把每个模块的高度放进sectop中
var secTop = new Array();
$(".tabSection").each(function(index) {
secTop.push($(this).offset().top);
});
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
//悬浮导航
if(winScrollTop >= tabTop){
$("#topNav").addClass("tabFloat");
}else{
$("#topNav").removeClass("tabFloat");
}
//切换导航
if(winScrollTop >= secTop[secTop.length-1]-100){
$("#topNav .active").removeClass('active')
$("#topNav .swiper-slide").eq(secTop.length-1).addClass('active')
}else if(winScrollTop < secTop[0]-100){
$("#topNav .active").removeClass("active");
}else{
for(i = 0 ; i < secTop.length-1 ; i++){
if(winScrollTop >= secTop[i]-100 && winScrollTop < secTop[i+1]-100){
$("#topNav .active").removeClass("active");
$("#topNav .swiper-slide").eq(i).addClass("active");
}
}
}
});
/*就是这块用谷歌模拟手机时这块的事件没有执行，不知道为什么*/
//滚动到对应专区
$('.swiper-slide').each(function(index) {
$(this).click(function(){
var scrollHeight = $(".tabSection").eq(index).offset().top;
$("html,body").animate({scrollTop:scrollHeight-40});
});
});
});
</script>
</html>
花开花落_青藤3回答
-
李晓健
<script type="text/javascript"> //swiper部分，为了各位方便复制我就写到一个页面中 var mySwiper = new Swiper('#topNav', { freeMode: true, freeModeMomentumRatio: 0.5, slidesPerView: 'auto', }); swiperWidth = mySwiper.container[0].clientWidth maxTranslate = mySwiper.maxTranslate(); maxWidth = -maxTranslate + swiperWidth / 2 $(".swiper-container").on('touchstart', function(e) { e.preventDefault() }) mySwiper.on('tap', function(swiper, e) { // e.preventDefault() slide = swiper.slides[swiper.clickedIndex] slideLeft = slide.offsetLeft slideWidth = slide.clientWidth slideCenter = slideLeft + slideWidth / 2 // 被点击slide的中心点 mySwiper.setWrapperTransition(300) if (slideCenter < swiperWidth / 2) { mySwiper.setWrapperTranslate(0) } else if (slideCenter > maxWidth) { mySwiper.setWrapperTranslate(maxTranslate) } else { nowTlanslate = slideCenter - swiperWidth / 2 mySwiper.setWrapperTranslate(-nowTlanslate) } $("#topNav .active").removeClass('active') $("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active') $("#topNav .swiper-slide").eq(swiper.clickedIndex) var scrollHeight = $(".tabSection").eq(swiper.clickedIndex).offset().top; $("html,body").animate({scrollTop:scrollHeight-40}); }) //jquery部分 $(document).ready(function(){ $("html,body").animate({scrollTop:0}); //判断导航个数 var tabLength = $('.swiper-slide a').length; //导航高度 var tabTop = $("#topNav").offset().top; // console.log(tabTop) //分类数组 把每个模块的高度放进sectop中 var secTop = new Array(); $(".tabSection").each(function(index) { secTop.push($(this).offset().top); }); $(window).scroll(function(){ var winScrollTop = $(window).scrollTop(); //悬浮导航 if(winScrollTop >= tabTop){ $("#topNav").addClass("tabFloat"); }else{ $("#topNav").removeClass("tabFloat"); } //切换导航 if(winScrollTop >= secTop[secTop.length-1]-100){ $("#topNav .active").removeClass('active') $("#topNav .swiper-slide").eq(secTop.length-1).addClass('active') }else if(winScrollTop < secTop[0]-100){ $("#topNav .active").removeClass("active"); }else{ for(i = 0 ; i < secTop.length-1 ; i++){ if(winScrollTop >= secTop[i]-100 && winScrollTop < secTop[i+1]-100){ $("#topNav .active").removeClass("active"); $("#topNav .swiper-slide").eq(i).addClass("active"); } } } }); /*就是这块用谷歌模拟手机时这块的事件没有执行，不知道为什么*/ // 这里的代码移动到 51 行了 //滚动到对应专区 // $('.swiper-slide').each(function(index) { // console.log(this); // $(this).click(function(){ // var scrollHeight = $(".tabSection").eq(index).offset().top; // $("html,body").animate({scrollTop:scrollHeight-40}); // }); // }); }); </script>点击事件在Swiper里拦掉了，到不是jquery这一去，可以去了解一下事件冒泡的相关知识 -
花开花落_青藤
html部分：<div id="topNav" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide "> <a > <div class="sport">aa</div> </a> </div> <div class="swiper-slide"> <a > <div class="mw">bb</div> </a> </div> <div class="swiper-slide"> <a > <div class="bd">cc</div> </a> </div> </div> </div><div class="tabSection"> /////////////</div><div class="tabSection"> /////////////</div><div class="tabSection"> /////////////</div><div class="tabSection"> /////////////</div> -
李晓健
给一个完整的代码 ，包括HTML的完整代码
随时随地看视频慕课网APP
相关分类
Html5