一个关于焦点图(轮播图)的插件——myfoucs

时间:2022-12-09 09:23:41

简单3步,你即可以用上myFocus。

Step 1. 在html的标签内引入相关文件

提示:符合条件的情况下,引入风格文件(js/css)可省,引入myFocus库即可。每一种风格都有一个js文件和css文件。必须都引入,且是同一类型Step 2. 创建myFocus标准的html结构,并填充你的内容 注: 焦点图盒子里面必须包含一个class为pic的div,然后再包裹内容列表 一个关于焦点图(轮播图)的插件——myfoucs ****
  • 一个关于焦点图(轮播图)的插件——myfoucs
  • 一个关于焦点图(轮播图)的插件——myfoucs
  • 一个关于焦点图(轮播图)的插件——myfoucs
**
**
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~