Swiper简单的导航切换

html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="./jquery/jquery-3.4.1/jquery-3.4.1.js"></script>
 8     <script src="./swiper/swiper.js"></script>
 9     <title>Document</title>
10     <link rel="stylesheet" href="./swiper/swiper.css">
11
12 </head>
13 <body>
14     <div class="wrap">
15         <div class="nav">
16             <ul>
17                 <li class="active">菜单1</li>
18                 <li>菜单2</li>
19                 <li>菜单3</li>
20                 <li>菜单4</li>
21             </ul>
22         </div>
23         <div class="swiper-container">
24             <div class="swiper-wrapper">
25                 <div class="swiper-slide">Slide 1</div>
26                 <div class="swiper-slide">Slide 2</div>
27                 <div class="swiper-slide">Slide 3</div>
28                 <div class="swiper-slide">Slide 4</div>
29             </div>
30             <!-- 如果需要分页器 -->
31             <div class="swiper-pagination"></div>
32
33             <!-- 如果需要导航按钮 -->
34             <div class="swiper-button-prev"></div>
35             <div class="swiper-button-next"></div>
36
37             <!-- 如果需要滚动条 -->
38             <div class="swiper-scrollbar"></div>
39         </div>
40     </div>
41 </body>
42 <script src="./index.js"></script>
43 </html>

css

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap{
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
        .nav{
            width: 100%;
            height: 100px;
            display: flex;
        }
        .nav ul{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .nav li.active{
            color:#999;
        }
        .swiper-slide{
            width: 100%;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background: cornsilk;
        }
    </style>

js

$(document).ready(function(){

    // 初始化swiper轮播插件
    var mySwiper = new Swiper (‘.swiper-container‘, {
        direction: ‘horizontal‘, // 横向切换选项
        loop: true, // 循环模式选项
        speed:300, //切换速度
        autoplay: {
        delay: 3000,//延迟切换
        stopOnLastSlide: false,//如果设置为true,当切换到最后一个slide时停止自动切换。(loop模式下无效)。
        disableOnInteraction: false, //如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。
        },
        on: { //回调函数,swiper从当前slide开始过渡到另一个slide时执行。
          slideChangeTransitionStart: function(){
            var index = this.realIndex;  //当前活动块的索引,与activeIndex不同的是,在loop模式下不会将复制的块的数量计算在内。
            $(".nav li").eq(index).addClass("active").siblings().removeClass("active");//根据活动块的索引切换每个li的字体颜色
          },
        },
        // 如果需要分页器
        pagination: {
          el: ‘.swiper-pagination‘,
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ‘.swiper-button-next‘,
          prevEl: ‘.swiper-button-prev‘,
        },

        // 如果需要滚动条
        scrollbar: {
          el: ‘.swiper-scrollbar‘,
        },
      })
    //  获取到导航条的所有li
    $(".nav li").click(function(){
        // 获取到当前点击li的索引值
        var index = $(this).index();
        mySwiper.slideToLoop(index, 1000, false);//切换到第一个slide,速度为1秒
        $(this).addClass("active").siblings().removeClass("active")
    })

 })

原文地址:https://www.cnblogs.com/yangjinggui/p/12056479.html

时间: 2024-10-25 07:07:41

Swiper简单的导航切换的相关文章

jquery实现简单的导航栏切换效果($(this).index)

一个简单的导航栏切换效果的制作,主要通过索引值和jquery的siblings()来实现 html代码: <div class="container"> <ul class="top-nav"> <li class="nav">html</li> <li class="nav">css</li> <li class="nav"&g

【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解(13)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50599951 本文出自:[江清清的博客] (一)前言 今天我们一起来看一下抽屉DrawerLayoutAndroid导航切换控件的讲解与基本使用. 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该DrawerLayout

用angularjs做简单的tab切换

用angularjs做简单的tab切换: 页面部分 <div> <div id="tabs" ng-controller="TabsCtrl"> <ul> <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.t

简单的选择切换视图

简单的选择切换视图,自定义选择类目和默认类目. SelectiveView.h #import <UIKit/UIKit.h> @protocol SelectiveViewDelegate <NSObject> //此代理方法中可做数据切换等操作 - (void)selectiveTag:(NSInteger)selectiveTag; @end @interface SelectiveView : UIView { //按钮个数 NSInteger buttonCount; /

6.3 简单的导航菜单

作为一个成功的网站,导航菜单是永远不可缺少的.导航菜单的风格往往也决定了整个网站的风格,因此很多设计者都会投入很多时间和精力来制作各式各样的导航条,从而体现网站的整体构架. 在传统方式下,制作导航菜单是很麻烦的工作.需要使用表格,设置复杂的属性,还需要使用JavaScript实现相应鼠标指针经过或点击动作.如果用CSS来制作导航菜单,实现起来就非常简单了. 一.简单的竖直排列菜单 当项目列表的list-style-type属性值为“none”时,制作各式各样的菜单和导航条便成了项目列表的最大用处

jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&

webdriver实现简单的窗口切换

webdriver实现简单的窗口切换,也只能是简单的,因为目前处于学习阶段,复杂的情况现在还没碰到过.之前写过关于一个小demo的总结,就有提到过在新开窗口进行操作的情况,用以下一句就可以搞定了,last代表最后一个窗口,用switch_to切换到最后一个窗口(即新开的窗口)进行操作 dr.switch_to.window dr.window_handles.last 这样一般的流程整个下来是不会有问题的,可是很死板.如果我在操作过程中开了n个窗口,并且要返回到某个窗口去进行操作那该怎么办?显然

jquery简单的tab切换特效插件jquery-tab demo代码下载

原文:jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

jquery 实现的一款超简单的图片切换功能

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="./assets/js/jquery.js"></script></head><style> </st