首页猿问 swiper和jquery冲突怎么解决

swiper和jquery冲突怎么解决

Html5

花开花落_青藤 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
$(".swiper-container").on('touchstart', function(e) { e.preventDefault() }) Swiper没有拦截，是题主自己的这个touchstart事件拦截了

回复 2017-06-12
李晓健
是的

回复 2017-06-12

花开花落_青藤

TA贡献23条经验获得超2个赞

html部分：

<a >

</a>

</div>

<a >

</a>

</div>

<a >

</a>

</div>

/////////////

</div>

/////////////

</div>

/////////////

</div>

/////////////

</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}); }); }); })

回复 2017-06-12
李晓健
完整完整完整完整完整完整完整HTML包括js文件的引入部分

回复 2017-06-12
花开花落_青藤
你好，我把完整的demo都放上去了。可以直接复制运行的，需要下swiper文件

回复 2017-06-12

点击展开后面8条

3 回答
0 关注
6660 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

swiper和jquery冲突怎么解决

swiper和jquery冲突怎么解决

3 回答

添加回答