简单3步,你即可以用上myFocus。
Step 1. 在html的标签内引入相关文件
提示:符合条件的情况下,引入风格文件(js/css)可省,引入myFocus库即可。
每一种风格都有一个js文件和css文件。必须都引入,且是同一类型
Step 2. 创建myFocus标准的html结构,并填充你的内容
注: 焦点图盒子里面必须包含一个class为pic的div,然后再包裹内容列表
IMG标签的属性说明:
src : 图片地址;
*thumb* : 图片的略缩图地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址);
*alt* : 图片的描述文字;
*text* : 图片更详细的描述文字(需要风格支持,可以省略)
Step 3. 在step1代码之后的任意一个位置调用(建议在head标签结束前调用)
注:你可以简单的调用—只设置它的盒子id,其它参数全部默认设置:
myFocus.set({
id:"picBox"}
);
//或详细一点的参数调用:
myFocus.set({
id:'boxID',//焦点图盒子ID
pattern:'mF_fancy',//风格应用的名称
time:3,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:450,//设置图片区域宽度(像素)
height:296,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏
});
通过这3步,你应该可以在浏览器欣赏到你的杰作了。enjoy it~