移动端html使用swiper.js实现页面内容与导航栏同滑动_html 导航菜单点击自动滑动代码

作者：花生_TL007 | 2024-02-11 20:46:53

踩

html 导航菜单点击自动滑动代码

移动端html使用swiper.js实现页面内容与导航栏同滑动

之前使用过ionic实现的导航栏可滑动，后来项目又使用纯html和js做滑动效果。于是发现了swiperjs，感觉很好用啊。记录一下，有需要的朋友可以参考。

先看一下效果图(不是动态图)，向左滑动内容，内容与上方导航栏同时变。
在这里插入图片描述

首先需要引入swiper相关的js与css文件。可以在swiper中文网下载。

引入js与css文件

<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js" charset="utf-8"></script>
1
2
3

下面直接上全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=0.5, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .content {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: scroll;
    }
    .content-top{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: #2a85e8;
    }
    a {
        text-decoration: none;
        color: #999 !important;
    }

    li {
        list-style: none;
    }

    .swiper-containee {
        max-width: 640px;
    }

    #nav {
        border-bottom: 1px solid #999;
        padding: 10px;
    }

    #nav li {
        text-align: center;
    }

    .active-nav {
        color: #fff;
    }

    .active-nav a {
        color: #2a85e8 !important;
        border-bottom: 2px solid;
        padding-bottom: 2px;
    }

    #image-swiper img{
        width: 100%;
    }
</style>

<body>
<div class="content">
    <div class="content-top">
        <span style="color: white;">移动端左右滑动(swiper.js)</span>
    </div>
    <div id="nav" class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide active-nav"><a href="javascript:;">第一页</a></li>
            <li class="swiper-slide"><a href="javascript:;">第二页</a></li>
            <li class="swiper-slide"><a href="javascript:;">第三页</a></li>
            <li class="swiper-slide"><a href="javascript:;">第四页</a></li>
            <li class="swiper-slide"><a href="javascript:;">第五页</a></li>
        </ul>
    </div>

    <div id="page" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slidepage" style="height: 540px;">
                <div id="image-swiper" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="images/banner.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/banner2.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/banner3.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/banner4.png" alt="">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
                <br>
                <div style="text-align: center; font-size: 20px;">
                    包含轮播图的滑动。
                </div>
                <br>
                <br>
                <div style="font-size: 18px;">
                    这里高度设置了540是固定的，<span style="color: red;">在540以内可以滑动。</span>
                    去掉后高度是内容撑起来的，在<span style="color: red;">内容的范围内左右滑动即可</span>。超出部分不在滑动区域内。
                    高度可自行设置。
                </div>
            </div>

            <div class="swiper-slide slidepage">
                第二块
            </div>
            <div class="swiper-slide slidepage">
                第三块
            </div>
            <div class="swiper-slide slidepage">
                第四块
            </div>
            <div class="swiper-slide slidepage">
                第五块
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js" charset="utf-8">
<script>
    var mySwiper = new Swiper ('#image-swiper', {
        // loop: true, // 循环模式选项
        autoplay: {
            disableOnInteraction: false, // 自动切换, 手动切换后不停止
        },
        // preventClicksPropagation: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        on:{
            tap: function(){
                console.log(this.clickedIndex);
                console.log(this.slides.length);
            },
        }
    })

    var myNav = new Swiper('#nav', {
        spaceBetween: 10,
        slidesPerView : 4,// 每页显示几个
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        preventClicksPropagation : false,// 点击之后出发onclick事件
        // slideToClickedSlide: true,// 点击后过度到slide位置
        // centeredSlides : true,// 居中显示
        on:{
            tap: function(){
                myPage.slideTo( myNav.clickedIndex);
                console.log(this.clickedIndex);
            },
        }
    })
    var myPage = new Swiper('#page',{
        on:{
            slideChangeTransitionStart: function(){
                updateNavPosition();
                console.log(this.activeIndex);
            }}
    })
    function updateNavPosition(){
        $('#nav .active-nav').removeClass('active-nav');
        var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
        if (!activeNav.hasClass('swiper-slide-visible')) {
            console.log(1);
            if (activeNav.index()>myNav.activeIndex) {
                console.log(2);
                var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
                myNav.slideTo(activeNav.index()-thumbsPerNav)
            }
            else {
                console.log(3);
                myNav.slideTo(activeNav.index())
            }
        }
    }
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

关于swiper.js的相关使用可查看swiper中文api文档。根据api基本都可以实现需要的功能。
如有什么问题，欢迎留言。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/76888