当前位置：首页 > 网页特效 > 幻灯片和轮播图

js myFocus焦点图插件

分类：幻灯片和轮播图日期：2024-05-14 点击(4) 评论(0)

js 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文件。
```javascript
<script src="myfocus-2.0.4.min.js"></script>
```
##### HTML结构
myFocus焦点图的HTML结构如下：
```javascript

<div id="boxID">
  
  <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焦点图插件。
```javascript
myFocus.set({id: 'boxID'});
```
或者在初始化时设置配置参数：
```javascript
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函数中调用

web299.com

js myFocus焦点图插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果