假设当前显示的是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. FlowPortal-BPM——移动手机端配置与IIS发布

    一.移动手机端配置 (1)VS打开文件夹iAnyWhere,配置config文件 (2)BPM-Web文件config中设置(设置为外网网址) 二.BPM设置 勾选移动审批可以设置要展示的字段信息,修 ...

  2. Ubuntu 16.04/Mac安装VSCode

    由于Atom打开大文件经常卡死的问题,我转到了VSCode了. 下载: https://code.visualstudio.com/ (链接: https://pan.baidu.com/s/1nvz ...

  3. RabbitMQ初学之一:exchange与queue的绑定

    最近公司需要使用RabbitMQ,但我之前一直使用的是ActiveMQ,对RabbitMQ进行了初步的学习,但是还不系统,自己做了一些小测试,怕自己以后忘了 一. 背景 拿到代码以后,发现,生产者在向 ...

  4. hibernate配置hbm2ddl.auto的四个参数

    <!-- Drop and re-create the database schema on startup --> <!-- hbm(hibernatemapping) ,ddl( ...

  5. Javac之关于方法的选择

    15.12. Method Invocation Expressions 15.12.1. Compile-Time Step 1: Determine Class or Interface to S ...

  6. windows10安装tensorflow CPU版本

    1.先安装python3.6版本 a.安装完成后在cmd中输入python,如果出现python命令行模式,则说明python安装成功. 2.在cmd中输入pip3 install --upgrade ...

  7. 使用gdb进行写操作

    使用gdb调试程序,读写操作是很普遍的事情.其中,读操作包括: 读取某个变量的值 读取某个内存地址里的内容 读取某个寄存器的值 对应地,写操作包括: 修改某个变量的值 修改某个内存地址里的内容 修改某 ...

  8. Golang真言

    Don't communicate by sharing memory, share memory by communicating. Concurrency is not parallelism. ...

  9. Ubuntu 10.10, 11.04, 11.10这三个版本无法从优盘启动

    问题:Ubuntu 10.10, 11.04, 11.10这三个版本无法从优盘启动 解决:从U盘启动安装的时候,会卡住不动.搞定办法相当简单,修改syslinux/syslinuxfg文件:将defa ...

  10. [转]SAP模块一句话入门

    本文转自:http://www.cnblogs.com/mybi/archive/2010/12/20/1911154.html SAP一句话入门:Financial & Controllin ...