首页新闻招聘找找看知识库

【求助】移动端左右滑动切换并且能向上循环切换的问题

0
悬赏园豆:30 [待解决问题]

本人菜鸟一枚,最近遇到这样一个问题,着实头疼,希望有大神能够帮忙,为移动端页面。

问题如下:

  • 导航栏固定在顶部,总共有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>
< >
分享
所有回答(3)
0

第一次遇见既要上下滑动又要左右滑动的。。。。

芳格 | 园豆:210 (菜鸟二级) | 2017-05-23 13:53

哈哈,我也是有点无语,不过现在解决了!又是左右滑动切换,又是向上滑动切换。。。

痞子Geeking | 园豆:3 (初学一级) | 2017-07-10 10:38
0

有个Iscroll.js的插件就可以实现上下左右滑动的

小城雨巷 | 园豆:204 (菜鸟二级) | 2017-05-27 14:55

谢谢!!

痞子Geeking | 园豆:3 (初学一级) | 2017-07-10 10:38
0

www.dowebok.com/demo/2014/77/  看这个里面的插件 绝对可以实现你的这个功能

♛恍若心逝 | 园豆:252 (菜鸟二级) | 2017-06-15 15:10

感谢!

痞子Geeking | 园豆:3 (初学一级) | 2017-07-10 10:39
   您需要登录以后才能回答,未注册用户请先注册