【求助】移动端左右滑动切换并且能向上循环切换的问题
0
悬赏园豆：30
[已解决问题]
解决于 2017-11-10 11:15
本人菜鸟一枚，最近遇到这样一个问题，着实头疼，希望有大神能够帮忙，为移动端页面。
问题如下：
- 导航栏固定在顶部，总共有6个分裂，分别对应6块内容（各内容高度不一），点击对应的菜单，页面显示相对应内容
- 内容可左右可滑动，并且滑动内容时，对应的菜单跟随变化
- 内容可向上滑动，当一个分类菜单内容浏览完毕后，继续向上滑动，切换到下一个菜单内容，无限循环下去（没有向下滑动切换上一个的效果，只有向上滑动切换到下一个的效果）
比较菜，一开始自己写了一个tab选项卡切换的那种，后来看到网上有大神用swiper插件比较容易解决，就应用了，确实可以，但是现在还有第三个问题，真的智商捉急，还望有能解决问题的大神能帮忙，小弟不胜感激，大神可以不用按照我的思路来解决问题，就是说可以不用插件，只要能解决问题，随便怎么整都行，谢谢啦！
（贴的html没有引入swiper.css和swiper.js以及jquery）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="css/swiper.css"/> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="js/swiper.min.js"></script> <style type="text/css"> /*menu*/ .menu {width: 100%;height: 30px;overflow: hidden;position: fixed;min-width: 320px;max-width: 960px;margin:0 auto;z-index: 999;} .menu li{width:17%;color:#333;float: left;font-size: 16px;height: 30px;line-height: 30px;text-align: center;background-color: #C0C0C0;} .menu li.selected{color:#800040;font-weight: bold;text-decoration: underline;} .menu li:nth-child(2){width: 15%;} /*content*/ .content {margin-top: 30px;} .content section{width:100%;height: 800px;overflow: hidden;text-align: center;font-size: 36px;color:#333;} </style> </head> <body> <div class="wrap"> <div id="menu" class="menu"> <ul class="clearfix"> <li class="selected">内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> <li>内容5</li> <li>内容6</li> </ul> </div> <div id="content" class="content swiper-container"> <div class="swiper-wrapper"> <section style="background-color:#408080;height:2000px;" class="swiper-slide">内容1内容1内容1内容1内容1内容1内容1</section> <section style="background-color:#CFD2D6;height:1600px;" class="swiper-slide">内容2内容2内容2内容2内容2内容2内容2</section> <section style="background-color:#8080C0;height:1200px;" class="swiper-slide">内容3内容3内容3内容3内容3内容3内容3</section> <section style="background-color:#804040;height:2400px;" class="swiper-slide">内容4内容4内容4内容4内容4内容4内容4</section> <section style="background-color:#800000;height:1200px;" class="swiper-slide">内容5内容5内容5内容5内容5内容5内容5</section> <section style="background-color:#804000;height:2400px;" class="swiper-slide">内容6内容6内容6内容6内容6内容6内容6</section> </div> </div> </div> <script> $(function(){ var oMenu = document.getElementById('menu'); var oContent = document.getElementById('content'); var aLis = oMenu.getElementsByTagName('li'); var aSections = oContent.getElementsByTagName('section'); var mySwiper = new Swiper('.swiper-container', { onTransitionStart: function(swiper){ $('li').eq(mySwiper.activeIndex).addClass('selected').siblings().removeClass('selected'); } }); for(var i = 0;i<aLis.length;i++){ aLis[i].index = i; aLis[i].onclick = function(){for(var j = 0;j<aLis.length;j++){ aLis[j].className = ''; } this.className = 'selected'; mySwiper.slideTo(this.index, 500); } }; </script> </body> </html>
最佳答案
0
有个Iscroll.js的插件就可以实现上下左右滑动的
收获园豆：15
谢谢！！
其他回答(2)
0
第一次遇见既要上下滑动又要左右滑动的。。。。
收获园豆：5
哈哈，我也是有点无语，不过现在解决了！又是左右滑动切换，又是向上滑动切换。。。
0
www.dowebok.com/demo/2014/77/ 看这个里面的插件 绝对可以实现你的这个功能
收获园豆：10
感谢！
