网站焦点图制作-使用myFocus库

本文介绍使用myFocus库制作网站焦点图

myFocus下载地址

第一步：引入myFocus库文件

<script src="js/myfocus-2.0.4.full.js" type="text/javascript"></script>
<!-- 引入myFocus库文件--script标签最好放在底部 -->

第二步：调用myFocus的myFocus.set函数

<script type="text/javascript">
    myFocus.set({
    id:'boxID',         //焦点图盒子ID
    pattern:'mF_YSlider',
    //风格应用的名称，myFocus的mf-pattern文件夹存放的都是风格文件~选择其中一个名字改掉即可更改风格！
    //time:11,              切换时间间隔(秒)
    //trigger:'click',      触发切换模式:'click'(点击)/'mouseover'(悬停)
    //width:200,            设置图片区域宽度(像素)
    //height:200,           设置图片区域高度(像素)
    //txtHeight:'default'   文字层高度设置(像素),'default'为默认高度，0为隐藏，隐藏图片的alt文字
    });
</script>       <!-- 调用myFocus函数 -->

第三步：插入焦点图代码

<!-- 焦点图盒子 -->
<div id="boxID">
  <!-- 载入中的Loading图片(可选) -->
  <div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div>
  <!-- 内容列表 -->
  <div class="pic"> <!-- 使用myFocus时，这个div是必须的，而且必须添加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>
        <!-- 你可以根据需要添加更多的列，img标签的alt属性是必须的！！！
            有些风格会同时显示出标题，如果没写会显示出null -->
    </ul>
  </div>
</div>

效果如下：
mF_YSlider风格：左下角显示alt内容，右下角可手动切换，同时也会自动切换~

---

myFocus的各种风格（存放在mf-pattern文件夹里面）：

有些风格会让我们的页面布局乱掉

这时修改风格对应的.css文件的背景边框即可：删掉padding和border属性：