LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖!
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单页轮播读图模式组件,零依赖!的更多相关文章
- 【JavaScript】案例二:使用JS完成首页轮播图效果——事件(onclick&onload)
1.切换图片例子: 事件(onclick) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 使用JS完成首页轮播图效果
获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...
- JavaScript学习——使用JS实现首页轮播图效果
1.相关技术 获取元素 document.getElementById(“id 名称”) 事件(onload) 只能写一次并且放到body标签中 定时操作:setInterval(“changeImg ...
- Vue.js示例:树型视图; 模式组件;
树型图 本示例是一个简单的树形视图实现,它展现了组件的递归使用. mycode pen:https://codepen.io/chentianwei411/pen/KGKQxE 重点:递归是如何形成的 ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- 商城05——首页轮播图显示实现&Redis环境搭建&Redis实现缓存
1. 课程计划 1.首页轮播图的展示 2.首页大广告展示流程图 3.Redis的常用命令 4.Redis的服务器搭建 (集群的搭建) 5.向业务逻辑中添加缓存 6.Jedis的使用(redis的客 ...
- 用jQuery实现优酷首页轮播图
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
- 关于用jQuery知识来实现优酷首页轮播图!
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
随机推荐
- sublime+python3 中文环境
工具-编译系统-新编译系统 { "cmd": ["C:/Program Files (x86)/Python36-32/python.exe","-u ...
- kubefuse 让Kubernetes 资源成为fuse 文件系统
kubefuse 是基于fuse 开发的文件系统,我们可以像访问文件系统一样访问Kubernetes 资源,使用python开发 支持以下特性: 可以使用方便的linux tools: ls. vim ...
- 洛谷P1650赛马与codevs 2181 田忌赛马
洛谷P1650 赛马 题目描述 我国历史上有个著名的故事: 那是在2300年以前.齐国的大将军田忌喜欢赛马.他经常和齐王赛马.他和齐王都有三匹马:常规马,上级马,超级马.一共赛三局,每局的胜者可以从负 ...
- fhq treap ------ luogu P3369 【模板】普通平衡树(Treap/SBT)
二次联通门 : LibreOJ #104. 普通平衡树 #include <cstdio> #include <iostream> #include <algorithm ...
- lixuxmint系统定制与配置(2)-输入法
小书匠Linux RIME的官网在这里 1.安装 刚开始是使用ibus-rime,后来使用过程感觉不舒服,就换回fcitx-rime.使用以下命令安装fcitx-rime sudo apt insta ...
- CSP-S 复赛之前的任务计划
一. 最短路算法复习 ★1.Dijkstra: 2. SPFA: 3. Floyd: 二. DP 复习 ★1.背包问题: 2.区间 DP: 3.状压 DP: 三. 数据结构 ★1. 线段树: 2. 树 ...
- Java 操作Redis封装RedisTemplate工具类
package com.example.redisdistlock.util; import org.springframework.beans.factory.annotation.Autowire ...
- python3 枚举定义和使用
定义 在某些情况下,一个类的对象是有限且固定的,比如季节类,它只有 4 个对象:再比如行星类,目前只有 8 个对象.这种实例有限且固定的类,在 Python 中被称为枚举类.程序有两种方式来定义枚举类 ...
- [HackTheBox]WEB题目
0x01 [50 Points] I know Mag1k 问题描述: Can you get to the profile page of the admin? 访问分配的地址,是一个带注册的登入页 ...
- win7“您可能没有权限使用网络资源”的解决办法
删除“拒绝从网络访问这台计算机”里面的Gu 1 在屏幕的左下角点开[开始]----在搜索程序和文件那个文本框里输入[输入gpedit.msc]然后回车. 2 弹出如下图的对话框, 3 依次展开-- ...