本文介绍使用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属性: