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();
时间: 2024-09-29 17:12:25

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

第一阶段:前端开发_使用JS完成首页轮播图效果

2018-06-04 使用JS完成首页轮播图效果 一.技术分析 获取元素: document.getElementById("id 名称") 事件(onload) :页面加载事件 定时操作:setInterval("changeImg()",3000); 二.步骤分析 第一步:确定事件(onload)并为其绑定一个函数    第二步:书写绑定的这个函数    第三步:书写定时任务(setInterval)    第四步:书写定时任务里面的函数    第五步:通过变量

JS+css3焦点轮播图PC端

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js原生web轮播图</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 list-style: none; 11 -moz-user-select: none;/*文字不可选

用jQuery实现优酷首页轮播图

▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解:或者你和我一样学习jQuery不久,那你可以看看我的jQuery小案例(持续更新),互相学习! 预览:优酷首页轮播图 ▓▓▓▓▓▓ 思路 思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了 例如:我们点

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

▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解:或者你和我一样学习jQuery不久,那你可以看看我的jQuery小案例(持续更新),互相学习! 预览:优酷首页轮播图 ▓▓▓▓▓▓ 思路 思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了 例如:我们点

JS学习笔记--轮播图效果

希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代码 <style> ul, ol { padding:0; margin:0; } li { list-style:none; } #box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:r

原生JS实现简易轮播图

原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = function() { var tab = 0; var loop_imgs = new Array("img/l1.jpg", "img/l2.jpg", "img/l3.jpg", "img/l4.jpg", "img/l5

jquery 首页轮播插件 icarouselbox.js

// 首页轮播(icarouselbox) //需jquery支持 // powered by 傅攀 // email [email protected] // 完成日期:2015-11-24 // 说明: // <div class="carouselbox" sizeInf="500 350 50 50 100" style="display:none;"> // <!--sizeInf 中央窗口宽.高.上下相对偏移.按钮宽

Android仿京东首页轮播文字(又名垂直跑马灯)

Android仿京东首页轮播文字(又名垂直跑马灯) 京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个

JS 表单的验证

表单用于搜集不同类型的用户输入. 表单的基本元素有: Button Checkbox Text Radio Select Option Submint Reset Textarea 具体怎么使用我就不介绍了,可以查看HTML. 表单的基本属性有 action  表单要发送出去的地址 enctype:表示表单的封装方式 target:表示发送后的跳转方式 method:提交的方式,一般有get跟post 如果采用 POST 方法,浏览器将会按照下面两步来发送数据.首先,浏览器将与 action 属