强大的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文件。

1	`<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焦点图插件。

1	`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”选择风格下载。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：自写的许愿墙
下一个特效： html5考察眼力小游戏猜金币、最强眼力源码