假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1

body下面添加如下代码

<div class="swiper-container temp">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
</div>
<div class="swiper-slide">
2
</div>
<div class="swiper-slide">
3
</div>
</div>
</div>

引用swiper的css和js脚本(当前使用的是4.x以上版本)

添加js脚本

var now_ActiveIndex=2;//,//当前所在下标
var tempSwiper = new Swiper('.swiper-container.temp', {
initialSlide: 1,
loop:true,
speed:400,
on: {
slideChange: function(swiper){//当当前Slide切换时执行(activeIndex发生改变)
var pre_number=Number($(this.slides[now_ActiveIndex]).text());
if(now_ActiveIndex>this.activeIndex){
if(now_ActiveIndex==4&&this.activeIndex==1){
$(this.slides[this.activeIndex]).text(pre_number);
}else{//上一个
var act_number=pre_number-1;
$(this.slides[this.activeIndex]).text(act_number);
}
}else if(now_ActiveIndex<this.activeIndex){
if(now_ActiveIndex==0&&this.activeIndex==3){
$(this.slides[this.activeIndex]).text(pre_number);
}else{//下一个
var act_number=pre_number+1;
$(this.slides[this.activeIndex]).text(act_number);
}
} now_ActiveIndex=this.activeIndex;
},
},
})

初始值:

往左滑动三次:

往右滑动一次

做这个测试主要为了后面日历的左右滑动改变上一月下一月

swiper动态改变滑动内容的更多相关文章

  1. 有关swiper动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常)

    以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会 ...

  2. jquery动态改变元素内容

    ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容(包括 HTML 标记) ● val() - 设置或返回表单字段的值(只针对表单或者输入框)

  3. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  4. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  5. android 动态改变listview的内容

    本文模拟:点击一个按钮,为已有的listview添加一行数据 <?xml version="1.0" encoding="utf-8"?> < ...

  6. 超棒的JS移动设备滑动内容幻灯实现 - Swiper

    来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库.因此体积非常小,适合运行在移动设 ...

  7. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  8. jquery.range.js左右滑动选取数值插件,动态改变进度。

    作为一个初级前端工作人员,我最近在做一个关于直播的项目,其中一个功能要求是设置延迟时间, 所以就用到了jquery.range.js这个插件.插件中设置$(".single-slider&q ...

  9. js 输出语句document.write()及动态改变元素中内容innerHTML的使用

    操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标 ...

随机推荐

  1. QuantLib 金融计算——随机过程之 Heston 过程

    目录 QuantLib 金融计算--随机过程之 Heston 过程 Heston 过程 参考文献 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--随机过程之 H ...

  2. Spark构成

    RDD Spark基本的数据结构叫弹性分布式数据集(Resilient Distributed Datasets,简称RDD). 概念: 一个分布于集群节点的只读数据集合,并以容错的.并行的方式进行维 ...

  3. 【转载】MDX Step by Step 读书笔记(四) - Working with Sets (使用集合)

    1. Set  - 元组的集合,在 Set 中的元组用逗号分开,Set 以花括号括起来,例如: { ([Product].[Category].[Accessories]), ([Product].[ ...

  4. date命令的基本用法

    date设置时间 设置时间:-s参数 date -s "20190426 15:22:33" date查看时间差  (-d参数多用于脚本) 查看时间差:-d参数date -d &q ...

  5. [转] Maven 直接下载依赖项 artifact, dependency:get

    [From]http://dnotes.wikidot.com/dependency:get-example To download an artifact into local repository ...

  6. java反射机制_读取properties

    代码: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; /** * 反射特点: ...

  7. Spring Boot的filter简单使用

    过滤器(Filter)的注册方法和 Servlet 一样,有两种方式:代码注册或者注解注册 1.代码注册方式 通过代码方式注入过滤器 @Bean     public FilterRegistrati ...

  8. HTML 权重标签的使用

    <H>标签通常使用<H1><H2><H3>这3个标签是有权重加分的,<H4>用于无用途的文字标记等 非重要相关字. <H1>有别 ...

  9. 时间格式为yyyymmdd的String类型的时间,计算时间间隔有错误

    时间格式类型为yyyymmdd,并且为String类型,计算时间间隔有误,一直搞不清楚是什么原因.网上百度了许多,时间格式基本都是yyyy-mm-dd这样的时间格式的,但是yyyymmdd这样的时间格 ...

  10. 关于对Enum的理解

    之前一直对枚举类型的理解存在误解,现重新学习 Enum 类型的介绍 枚举类型(Enumerated Type) 很早就出现在编程语言中,它被用来将一组类似的值包含到一种类型当中.而这种枚举类型的名称则 ...