亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

swiper和jquery沖突怎么解決

swiper和jquery沖突怎么解決

花開花落_青藤 2017-06-12 13:55:48
<!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].clientWidthmaxTranslate = 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 回答

已采納
?
李曉健

TA貢獻1036條經驗 獲得超461個贊

<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這一去，可以去了解一下事件冒泡的相關知識

查看完整回答
1 反對 回復 2017-06-12
  • woshiajuana
    woshiajuana
    $(".swiper-container").on('touchstart', function(e) { e.preventDefault() }) Swiper沒有攔截，是題主自己的這個touchstart事件攔截了
  • 李曉健
    李曉健
    是 的
?
花開花落_青藤

TA貢獻23條經驗 獲得超2個贊

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>


查看完整回答
反對 回復 2017-06-12
?
李曉健

TA貢獻1036條經驗 獲得超461個贊

給一個完整的代碼 ?，包括HTML的完整代碼

查看完整回答
反對 回復 2017-06-12
  • 花開花落_青藤
    花開花落_青藤
    這個是jquery部分： $(document).ready(function(){ $('.swiper-slide').each(function(index) { $(this).click(function(){ var scrollHeight = $(".tabSection").eq(index).offset().top; console.log(scrollHeight); $("html,body").animate({scrollTop:scrollHeight-40}); }); }); })
  • 李曉健
    李曉健
    完整完整完整完整完整完整完整HTML包括js文件的引入部分
  • 花開花落_青藤
    花開花落_青藤
    你好，我把完整的demo都放上去了。可以直接復制運行的，需要下swiper文件
點擊展開后面8條
  • 3 回答
  • 0 關注
  • 6647 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號