LM_ReadImgMode.js

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

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

TXT

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

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

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

Works

手机中国图片库

汽车点评-文章图片页

CDN

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

Demo

实例演示

USE

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

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

当前页数 从1开始

  1. box.page = number;

总页数

  1. box.tote = number;

跳转到number页

  1. box.jump(number)

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

  1. box.onPageStart(fn);

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

  1. box.onPageEnd(fn);

上一张

  1. box.prev();

下一张

  1. box.next();

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

  1. box.prevEnd(fn);

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

  1. box.nextEnd(fn);

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

  1. box.isAuto = false;

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

  1. box.autoTime = 6000;

自动播放

  1. box.autoPlay();

自动播放暂停

  1. 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. (尚007)Vue强制绑定class和style

    注意:class和style的值是动态的值 1.test007.html <!DOCTYPE html><html lang="en"><head&g ...

  2. win10 安装Borland C++Builder 6后编译运行出

    win10系统安装bcb后打开bcb后显示 Unable to rename ‘c:\Program Files(x86)\Borland\CBuilder6\Bin\bcb.$$$'to‘cc:\P ...

  3. leetcode解题报告(28):Remove Linked List Elements

    描述 Remove all elements from a linked list of integers that have value val. Example Given: 1 --> 2 ...

  4. Problem 5 素数筛法+并查集

    $des$ 给定一个长度为 $n$ 的正整数序列 ${a_i }$.将 ${1,2,...,n}$ 划分成两个非空集合 $S.T$,使得 $gcd(\prod_{i \in S} a_i, \prod ...

  5. Angular动态组件

    一.主页面: app.component.html: <button (click)="load();">动态</button> 2<div #dom ...

  6. P2016 战略游戏——树形DP大水题

    P2016 战略游戏 树形DP 入门题吧(现在怎么是蓝色标签搞不懂): 注意是看见每一条边而不是每一个点(因为这里错了好几次): #include<cstdio> #include< ...

  7. web开发学习的网站

    网易云课堂>imooc>coursera   网易云课堂 imooc.com 关于web的视频会多一些 最近要学一个付费的课程   http://www.v2ex.com/t/154242 ...

  8. ubuntu之路——day10.4 什么是人的表现

    结合吴恩达老师前面的讲解,可以得出一个结论: 在机器学习的早期阶段,传统的机器学习算法在没有赶超人类能力的时候,很难比较这些经典算法的好坏.也许在不同的数据场景下,不同的ML算法有着不同的表现. 但是 ...

  9. JS实现下载的常用方案

    如何使用JS实现异步下载吗?即:既能实现下载又不刷新页面.这时我们常常会想到使用ajax,但是由于ajax接受的response始终是字符串,因此并不能使用ajax来实现下载功能. 常见是新建下载的方 ...

  10. 表单在ios下输入框必须重压或长按才能唤起软键盘

    解决方案: 一.在node_module里找到fastClick文件,然后找到focus方法,加一句focus方法即可解决:FastClick.prototype.focus = function(t ...