焦点轮播图——myfocus焦点图库
2016-03-10 10:35
387 查看
网站网址:http://demo.jb51.net/js/myfocus/demo.html
简单3步,你即可以用上myFocus。
提示:符合条件的情况下,引入风格文件(js/css)可省,引入myFocus库即可。那么风格文件是如何自动引入的?详情请看myFocus的文件结构与自动引入风格文件机制。
IMG标签的属性说明:
src:图片地址;
thumb:图片的略缩图地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址);
alt:图片的描述文字;
text:图片更详细的描述文字(需要风格支持,可以省略)
进过这3步,你应该可以在浏览器欣赏到你的杰作了。enjoyit~
myFocus的文件结构与自动引入风格文件机制
事实上,风格文件是不需要在使用时手动引入,myFocus会根据你的pattern设置,寻找myFocus库文件目录下的mf-pattern目录,当找到相应的风格文件后,自动引入。
这样,你只需要把你的风格文件放在myFocus库文件目录下的mf-pattern目录内,即可实现自动引入机制。
例如,你的myFocus-2.0.0.min.js文件放在js目录,那么,只需在js目录内建立一个mf-pattern的子目录,这个子目录便是myFocus程序可以识别的存放风格文件的目录。
在mf-pattern目录中,也存在一个img的子目录,它是存放某些风格的图片文件,虽然并不是每款风格都会有图片文件。
建议把所有的风格文件都存放在这个mf-pattern目录,这样你就可以随意切换你的风格了,而且它是按需加载,并不会引入其它多余的文件。myFocus的整个加载量(主库+风格)平均只有12KB左右。
另外需要说明的是,这个自动引入机制已经做的足够智能,它并不会重复引入风格文件,例如当你已经手动引入风格文件,又或者干脆把某风格的js代码写在页面上,这时myFocus并不会再次寻找引入风格文件,而是直接读取页面上的。
*(另一篇文章说明)
首先下载某一风格的myfocus放在项目的js文件夹中。
图片要放在类名为pic的盒子中。//另外需要注意的是焦点图盒子DIV加了:style="visibility:hidden"属性,这是为了防止加载前的画面闪动。[/code]
[/code]
2、jQuery方式调用(需要引入jQuery库支持):
简单3步,你即可以用上myFocus。
Step1.在html的标签内引入相关文件
<scripttype="text/javascript"src="js/myfocus-2.0.0.min.js"></script><!--引入myFocus库--> <scripttype="text/javascript"src="js/mf-pattern/slide3D.js"></script><!--引入风格js文件--> <linkhref="js/mf-pattern/slide3D.css"type="text/css"/><!--引入风格css文件-->
提示:符合条件的情况下,引入风格文件(js/css)可省,引入myFocus库即可。那么风格文件是如何自动引入的?详情请看
Step2.创建myFocus标准的html结构,并填充你的内容
<divid="boxID"><!--焦点图盒子--> <divclass="loading"><imgsrc="img/loading.gif"alt="请稍候..."/></div><!--载入画面(可删除)--> <divclass="pic"><!--内容列表(li数目可随意增减)--> <ul> <li><ahref="#"><imgsrc="img/1.jpg"thumb=""alt="标题1"text="详细描述1"/></a></li> <li><ahref="#"><imgsrc="img/2.jpg"thumb=""alt="标题2"text="详细描述2"/></a></li> <li><ahref="#"><imgsrc="img/3.jpg"thumb=""alt="标题3"text="详细描述3"/></a></li> <li><ahref="#"><imgsrc="img/4.jpg"thumb=""alt="标题4"text="详细描述4"/></a></li> <li><ahref="#"><imgsrc="img/5.jpg"thumb=""alt="标题5"text="详细描述5"/></a></li> </ul> </div> </div>
IMG标签的属性说明:
src:图片地址;
thumb:图片的略缩图地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址);
alt:图片的描述文字;
text:图片更详细的描述文字(需要风格支持,可以省略)
Step3.在step1代码之后的任意一个位置调用(建议在head标签结束前调用)
//你可以简单的调用---只设置它的盒子id,其它参数全部默认设置: <scripttype="text/javascript"> myFocus.set({id:'boxID'}); </script> //或详细一点的参数调用: <scripttype="text/javascript"> myFocus.set({ id:'boxID',//焦点图盒子ID pattern:'mF_fancy',//风格应用的名称/////注意这个属性****** time:3,//切换时间间隔(秒) trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停) width:450,//设置图片区域宽度(像素) height:296,//设置图片区域高度(像素) txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏 }); </script> //更多参数设置及jQuery方式调用请查看使用者API。
进过这3步,你应该可以在浏览器欣赏到你的杰作了。enjoyit~
myFocus的文件结构与自动引入风格文件机制
事实上,风格文件是不需要在使用时手动引入,myFocus会根据你的pattern设置,寻找myFocus库文件目录下的mf-pattern目录,当找到相应的风格文件后,自动引入。
这样,你只需要把你的风格文件放在myFocus库文件目录下的mf-pattern目录内,即可实现自动引入机制。
例如,你的myFocus-2.0.0.min.js文件放在js目录,那么,只需在js目录内建立一个mf-pattern的子目录,这个子目录便是myFocus程序可以识别的存放风格文件的目录。
在mf-pattern目录中,也存在一个img的子目录,它是存放某些风格的图片文件,虽然并不是每款风格都会有图片文件。
建议把所有的风格文件都存放在这个mf-pattern目录,这样你就可以随意切换你的风格了,而且它是按需加载,并不会引入其它多余的文件。myFocus的整个加载量(主库+风格)平均只有12KB左右。
另外需要说明的是,这个自动引入机制已经做的足够智能,它并不会重复引入风格文件,例如当你已经手动引入风格文件,又或者干脆把某风格的js代码写在页面上,这时myFocus并不会再次寻找引入风格文件,而是直接读取页面上的。
*(另一篇文章说明)
首先下载某一风格的myfocus放在项目的js文件夹中。
Step1、在html的<head>标签内引入myFocus库文件
<scripttype="text/javascript"src="你的文件路径/myfocus-1.2.3.min.js"></script><!--引入myFocus库-->
Step2、创建标准的(myFocus)html结构,并填充你的内容(例子li数为5,实际可随意增减,但至少为2)
<divid="boxID"style="visibility:hidden"><!--焦点图盒子--> <divclass="loading"><span>请稍候...</span></div><!--载入画面(可删除)--> <ulclass="pic"><!--内容列表--> <li><ahref="#"><imgsrc="img/1.jpg"thumb=""alt="标题1"text="详细描述1"/></a></li> <li><ahref="#"><imgsrc="img/2.jpg"thumb=""alt="标题2"text="详细描述2"/></a></li> <li><ahref="#"><imgsrc="img/3.jpg"thumb=""alt="标题3"text="详细描述3"/></a></li> <li><ahref="#"><imgsrc="img/4.jpg"thumb=""alt="标题4"text="详细描述4"/></a></li> <li><ahref="#"><imgsrc="img/5.jpg"thumb=""alt="标题5"text="详细描述5"/></a></li> </ul> </div>
图片要放在类名为pic的盒子中。//另外需要注意的是焦点图盒子DIV加了:style="visibility:hidden"属性,这是为了防止加载前的画面闪动。[/code]
Step3、在step1代码之后的任意一个位置调用(建议在<head>标签结束前调用)
1、myFoucs常规方式调用://你可以简单的调用---只设置它的盒子id,其它参数全部为默认设置: <scripttype="text/javascript"> myFocus.set({id:'boxID'}); </script> //或详细一点的参数调用(推荐): <scripttype="text/javascript"> myFocus.set({ id:'boxID',//焦点图盒子ID pattern:'mF_name',//风格应用的名称 time:3,//切换时间间隔(秒) trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停) width:450,//设置图片区域宽度(像素) height:296,//设置图片区域高度(像素) txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏 }); </script>
[/code]
2、jQuery方式调用(需要引入jQuery库支持):
//同上面一样,你可以简单的调用: <scripttype="text/javascript"> $('#boxID').myFocus(); </script> //或详细一点的参数调用(推荐): <scripttype="text/javascript"> $('#boxID').myFocus({ pattern:'mF_name',//风格应用的名称 time:3,//切换时间间隔(秒) trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停) width:450,//设置图片区域宽度(像素) height:296,//设置图片区域高度(像素) txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏 }); </script> //或许你已看出,它的参数设置和上面常规方式是一模一样的,不同的是焦点图盒子ID参数交给了jQuery处理。
相关文章推荐
- JS_元素位置大小
- jQuery 方法
- leetcode之 Palindrome Partitioning
- 详解mysql的sql_mode模式
- js、javascript正则表达式验证身份证号码
- TypeScript Type Innference(类型判断)
- Python多线程学习
- 抢鲜看!ComponentOne 2016年产品规划
- Android设计模式系列--模板方法模式
- sql语句like的用法
- c3p0配置解析
- JavaScript正则表达式
- PHP扩展迁移为PHP7扩展兼容性问题记录
- 高仿爱鲜蜂购物应用源码
- jquery text
- tony_iptables_01_linux下IPTABLES配置详解(转)
- JQuery fullCalendar 时间差 排序获取距当前最近的时间。
- 使用Spring.net中对Ado.net的抽象封装来访问数据库
- 下拉刷新
- Android数据库小知识