强大的js焦点图插件myFocus.js
2016-12-16 11:30
169 查看
简要教程
myFocus是一个专注于WEB端焦点图/轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果,体积小,使用简单,兼容ie6+和所有的主流浏览器。myFocus焦点图插件的特点还有:
原生JS编写,独立无依赖
性能卓越,同样效果比jQuery更流畅
简单易用,傻瓜式API和标准HTML结构
效果华丽,媲美Flash焦点图
功能强大,30多种风格切换,支持N种常用设置
体积小巧,仅5.93KB(minified & gzipped)
支持 IE6+ / Chrome / Firefox 等现代浏览器
支持自定义开发扩展
HTML结构
myFocus焦点图的HTML结构如下:
img标签的属性说明:
初始化插件
可以通过下面的方法来初始化myFocus焦点图插件。
或者在初始化时设置配置参数:
请到 dist 目录下载 myfocus 的min版(压缩)或full版(无压缩),并在子目录“mf-pattern”选择风格下载。
注意:myfocus 运行时会自动寻找其子目录“mf-pattern”下相应的风格文件,所以“mf-pattern”文件夹一定要存在。
另外一种是作为jQuery插件的方式调用(前提是必须已加载jQuery库):
参数settings为JSON格式数据,包含以下基本属性设置:
参数callback为可选回调函数,当焦点图全部准备就绪后(开始播放前)调用,在这里可设置自定义事件等。
另外,每款风格也可以定义它们自己的扩展属性设置,或是默认设置(可以在它的js文件中找到),例如在“mF_taobao2010”这款风格中,扩展设置有:
你可以在set函数调用的时候重新设置这些参数,以覆盖默认值。
演示地址:http://www.datouwang.com/jiaoben/728.html
myFocus是一个专注于WEB端焦点图/轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果,体积小,使用简单,兼容ie6+和所有的主流浏览器。myFocus焦点图插件的特点还有:
原生JS编写,独立无依赖
性能卓越,同样效果比jQuery更流畅
简单易用,傻瓜式API和标准HTML结构
效果华丽,媲美Flash焦点图
功能强大,30多种风格切换,支持N种常用设置
体积小巧,仅5.93KB(minified & gzipped)
支持 IE6+ / Chrome / Firefox 等现代浏览器
支持自定义开发扩展
使用方法
在页面中引入样式文件myfocus-2.0.4.min.js文件。<script src="myfocus-2.0.4.min.js"></script>
HTML结构
myFocus焦点图的HTML结构如下:
<!-- 焦点图盒子 --> <div id="boxID"> <!-- 载入中的Loading图片(可选) --> <div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div> <!-- 内容列表 --> <div class="pic"> <ul> <li><a href="#"><img src="img/1.jpg" alt="标题1" /></a></li> <li><a href="#"><img src="img/2.jpg" alt="标题2" /></a></li> <li><a href="#"><img src="img/3.jpg" alt="标题3" /></a></li> <li><a href="#"><img src="img/4.jpg" alt="标题4" /></a></li> <li><a href="#"><img src="img/5.jpg" alt="标题5" /></a></li> <!-- 你可以根据需要添加更多的列 --> </ul> </div> </div>
img标签的属性说明:
src: 图片地址
thumb: 图片的略缩图地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址)
alt: 图片的描述文字
text:图片更详细的描述文字(需要风格支持,可以省略)
初始化插件
可以通过下面的方法来初始化myFocus焦点图插件。
myFocus.set({id: 'boxID'});
或者在初始化时设置配置参数:
myFocus.set({ id: 'boxID',//焦点图盒子ID pattern: 'mF_tbhuabao',//焦点图风格的名称 time: 3,//切换时间间隔(秒) trigger: 'mouseover',//触发切换模式:'click'(点击)/'mouseover'(悬停) delay: 200,//'mouseover'模式下的切换延迟(毫秒) txtHeight: 'default'//标题高度设置(像素),'default'为默认CSS高度,0为隐藏 });
请到 dist 目录下载 myfocus 的min版(压缩)或full版(无压缩),并在子目录“mf-pattern”选择风格下载。
注意:myfocus 运行时会自动寻找其子目录“mf-pattern”下相应的风格文件,所以“mf-pattern”文件夹一定要存在。
配置参数
myFocus有两种调用方式,一种是常规调用:myFocus.set(settings[, callback]);//这段代码可以在引入myFocus库后的任意地方调用
另外一种是作为jQuery插件的方式调用(前提是必须已加载jQuery库):
$(expr).myFocus(settings[, callback]);//这段代码必须在焦点图的HTML结构之后调用,或是在ready函数中调用
参数settings为JSON格式数据,包含以下基本属性设置:
参数 | 类型 | 默认值 | 描述 |
id | String | null | 焦点图盒子ID,无默认值,必填项(在常规调用时) |
pattern | String | 'mF_fancy' | 风格应用名称 |
time | Number | 4 | 切换时间间隔(单位秒) |
width | Number | null | 图片区域宽度(单位像素),无默认值,留空则从CSS样式获取大小 |
height | Number | null | 图片区域高度(单位像素),无默认值,留空则从CSS样式获取大小 |
txtHeight | Number/String | 'default' | 文字层高度(单位像素),0表示隐藏文字层,省略设置或'default'即为默认高度 |
trigger | String | click' | 触发切换模式['click'(鼠标点击)|'mouseover'(鼠标悬停)] |
wrap | Boolean | true | 是否保留边框(有的话)[true|false] |
auto | Boolean | true | 是否自动播放(切换)[true|false] |
index | Number | 0 | 开始显示的图片序号(从0算起) |
delay | Number | 100 | trigger为'mouseover'模式下的切换延迟(单位毫秒) |
loadIMGTimeout | Number | 3 | 载入myFocus图片的最长等待时间(Loading画面时间)(单位秒,0表示不等待直接播放) |
另外,每款风格也可以定义它们自己的扩展属性设置,或是默认设置(可以在它的js文件中找到),例如在“mF_taobao2010”这款风格中,扩展设置有:
参数 | 类型 | 默认值 | 描述 |
seamless | Boolean | true | 是否无缝,可选:true(是)/false(否) |
duration | Number | 600 | 过渡时间(毫秒),时间越大速度越小 |
direction | String | 'left' | 运动方向,可选:'top'(向上) | 'left'(向左) |
easing | String | 'easeOut' | 运动形式,可选:'easeOut'(快出慢入) | 'easeIn'(慢出快入) | 'easeInOut'(慢出慢入) | 'swing'(摇摆运动) | 'linear'(匀速运动) |
演示地址:http://www.datouwang.com/jiaoben/728.html
相关文章推荐
- 最简单的图片轮播--利用myfocus js焦点图库插件
- myFocus.js——焦点图
- JavaScript(js)设置输入焦点(focus)
- JavaScript(js)设置默认输入焦点(focus)
- viewer.js--一个强大的jQuery图像查看插件
- jq获得焦点focus,失去焦点blur,change()函数,js的onfocus,onblur,onchange()方法
- 强大的js插件jqeuryUI做网页对话框效果!简单
- 使用JS取得焦点(focus)元素代码
- [JS插件] Swiper:强大的触摸滑动&整屏滚动插件
- JS实现文本框和文本域获取焦点focus()时,光标在本文的末尾
- [置顶] 自己做个js表格插件呗--mytable v0.1
- 使用JS取得焦点(focus)元素
- Parsley 强大的JS表单验证插件
- My安装EclipseJS代码提示(Spket插件)
- 分享一个网站通用 JQUERY + js 插件 适用于各种网页特效,哥强烈推荐,作者很强大
- ext-js当用blur()和focus()来控制焦点
- 使用JS取得焦点(focus)元素代码
- 强大的jQuery焦点图无缝滚动走马灯特效插件cxScroll
- 强大的js图片轮播插件Swiper
- JavaScript(js)设置默认输入焦点(focus)