超简单超好用的js幻灯轮播图插件Myfocus使用介绍

最近我的主页上的幻灯因为Flash Player的问题总是不能正常显示，于是就上网找到了这个轮播图插件，之前也用过其他的但是都不太好用或者说修改起来很麻烦不能很好的嵌入到自己的网页中，今天说的这个就很好用了，记录一下，方便以后用的时候查看。

01.准备工作

  首先我们需要的就是该插件的js文件，该插件真的是轻量级插件，js文件只有10k，但是下载的话可能需要绕弯子，待会我会把所有用到的文件打包分享一下。

然后就是你需要的风格对应的风格文件了，每种风格对应了一个js文件和一个css文件，同样的我会把所有的风格文件分享出来。

02.开始使用

    首先导入上面所述的文件，这里我选择的是mF_kdui风格，更多风格可以在文末给出的地址预览：

<script type="text/javascript" src="js/myfocus-2.0.0.min.js"></script><!--引入myFocus库-->
<script type="text/javascript" src="js/mf-pattern/mF_kdui.js"></script><!--引入风格js文件-->
<link href="js/mf-pattern/mF_kdui.css" type="text/css" /><!--引入风格css文件-->

    然后我们需要创建myFocus标准的html结构，并填充你的内容，这个直接复制就行了：

<div id="myFocus"><!--焦点图盒子-->
  <div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div><!--载入画面(可删除)-->
  <div class="pic"><!--图片列表-->
  	<ul>
        <li><a href="#1"><img src="img/1a.jpg" thumb="" alt="这里是标题" text="图片更详细的描述文字" /></a></li>
        <li><a href="#2"><img src="img/2a.jpg" thumb="" alt="这里是标题" text="图片更详细的描述文字" /></a></li>
        <li><a href="#3"><img src="img/3a.jpg" thumb="" alt="这里是标题" text="图片更详细的描述文字" /></a></li>
        <li><a href="#4"><img src="img/4a.jpg" thumb="" alt="这里是标题" text="图片更详细的描述文字" /></a></li>
        <li><a href="#5"><img src="img/5a.jpg" thumb="" alt="这里是标题" text="图片更详细的描述文字" /></a></li>
  	</ul>
  </div>
</div>

    使用js创建调用即可完成

<script type="text/javascript">
myFocus.set({
    id:'myFocus',//焦点图盒子ID
    pattern:'mF_kdui',//风格应用的名称
    time:3,//切换时间间隔(秒)
    trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
    width:450,//设置图片区域宽度(像素)
    height:296,//设置图片区域高度(像素)
    txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>

03.效果预览：或者点击链接进入我的网站查看效果：www.uxahz.com

04.因为我使用的帝国CMS系统，所以图片以及文字可以使用灵动标签循环取出，你也可以使用其他的方式设置图片以及文字描述。

下载地址：链接:链接: https://pan.baidu.com/s/1ojoVfr3FuMY87aL72cVpKg 提取码: 8j9e 

脚本之家的API详细介绍：http://demo.jb51.net/js/myfocus/

在这里可以预览所有的风格，选择你喜欢的风格使用即可。