LM_ReadImgMode.js

PC单页轮播读图模式组件,零依赖!

github:http://dtdxrk.github.io/LM-ReadImgMode/

TXT

1.全新的2.0版本,脱离对于jQuery的依赖,压缩后只有2k。

2.逻辑层跟业务完全脱离,不带缩略图滚动功能,只有底层的翻页功能。

3.增加了对外的接口方法。

Works

手机中国图片库

汽车点评-文章图片页

CDN

http://dtdxrk.github.io/LM_ReadImgMode/LM_ReadImgMode-min.js

Demo

实例演示

USE

生成一个单页轮播读图组件的实例

var box = new LM_ReadImgMode({
imgID : @sting, //轮播的图片id *必填
aImg : @Array, //轮播图片url的数组 *必填
isAuto : @Boole //是否自动播放 (默认或省略为暂停)
});

当前页数 从1开始

box.page = number;

总页数

box.tote = number;

跳转到number页

box.jump(number)

翻页开始(fn执行翻页开始前的方法)

box.onPageStart(fn);

翻页结束(fn执行翻页结束后的方法)

box.onPageEnd(fn);

上一张

box.prev();

下一张

box.next();

上一张到头事件(fn执行需要的方法)

box.prevEnd(fn);

下一张到头事件(fn执行需要的方法)

box.nextEnd(fn);

是否自动播放(设置布尔值)

box.isAuto = false;

自动播放时间(默认6000毫秒)

box.autoTime = 6000;

自动播放

box.autoPlay();

自动播放暂停

box.autoStop();

LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖!的更多相关文章

  1. 【JavaScript】案例二:使用JS完成首页轮播图效果——事件(onclick&onload)

    1.切换图片例子: 事件(onclick) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  2. 使用JS完成首页轮播图效果

    获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...

  3. JavaScript学习——使用JS实现首页轮播图效果

    1.相关技术 获取元素 document.getElementById(“id 名称”) 事件(onload) 只能写一次并且放到body标签中 定时操作:setInterval(“changeImg ...

  4. Vue.js示例:树型视图; 模式组件;

    树型图 本示例是一个简单的树形视图实现,它展现了组件的递归使用. mycode pen:https://codepen.io/chentianwei411/pen/KGKQxE 重点:递归是如何形成的 ...

  5. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析

    这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...

  7. 商城05——首页轮播图显示实现&Redis环境搭建&Redis实现缓存

    1.   课程计划 1.首页轮播图的展示 2.首页大广告展示流程图 3.Redis的常用命令 4.Redis的服务器搭建 (集群的搭建) 5.向业务逻辑中添加缓存 6.Jedis的使用(redis的客 ...

  8. 用jQuery实现优酷首页轮播图

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

  9. 关于用jQuery知识来实现优酷首页轮播图!

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

随机推荐

  1. spring-data-jpa一对多多对一多对多关联

    一对多.多对一 Country类 @Entity @Table(name = "Country") public class Country { @Id //sequence id ...

  2. NIO原理详解

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/CharJay_Lin/article/d ...

  3. Acwing P288 休息时间 题解

    Analysis 首先假设一天的第N小时与后一天的第一个小时不相连, 这种情况下DP转移比较好想 dp[i][j][0/1]dp[i][j][0/1]表示 考虑一天的前i个小时,已经休息了j小时,且第 ...

  4. asp.net文件夹上传下载组件

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  5. Python之☞float浮点数精度问题

    Python的浮点数损失精度问题(转) 一个简单的面试题: >>>0.1+0.1+0.1 0.2 >>>0.1+0.1+0.1 0.3000000000000000 ...

  6. RHEL7下载

    RHEL7下载地址: http://mirrors.aliyun.com/centos/ 我的百度云盘地址: 链接:https://pan.baidu.com/s/1_-bm12bekFlWJiGHj ...

  7. 利用JDK方式和GuavaAPI方式实现观察者模式

    1.JDK方法实现案例需求: 去餐厅吃饭有时候需要排队,进行排队叫号.假如所有等待的人都是观察者,叫号系统就是一个被监听的主题对象.当叫号系统发出叫号通知后,所有等待的人,都会收到通知,然后检查自己的 ...

  8. spring boot + vue 前后分离实现登录功能(三)

    Spring boot 后台 github 地址 SpringBoot-book-vue-demo 使用tk.mytabis 简化mybatis 开发 使用 durid 连接池 连接Mysql pom ...

  9. html5中hgroup和address标签使用总结

    html5中hgroup和address标签使用总结 一.总结 一句话总结: hgroup元素(不推荐使用):用来给标题分组,通常放在header中: address元素:斜体显示:用来说明作者的联系 ...

  10. 20190729 将博客搬至CSDN

    为更方便技术交流, 现将博客园内容搬迁至csdn,  https://blog.csdn.net/lxw1844912514