强大的js焦点图插件myFocus 备份

  插件描述:myFocus是一个专注于WEB端焦点图轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果,体积小,使用简单,兼容ie6+和所有的主流浏览器。
  myFocus
  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”选择风格下载。

 

  附1:网上还能看到的介绍(估计是官网克隆)
  v2.0.1
  http://demo.jb51.net/js/myfocus/demo.html

  v1.2.3
  http://www.chhua.com/myfocus/index.html


  一个很简洁的介绍:《图册幻灯:myFocus JS焦点图库 v2.0.4稳定版(可选择N种幻灯片样式)》
  http://www.52img.cn/daima/web/pic/1000110000000210.html


  附2:其它的一些资源
  链接: http://pan.baidu.com/s/1c0ObkT6 密码: euk5

posted @ 2018-10-13 09:33  fukegdlfm  阅读(141)  评论(0)    收藏  举报