myFocus实现焦点图制作

网页中，首页开头的介绍图片动态切换有很好的视觉效果。myFocus库基本上可以实现所有常见的动态效果。下面进入正题

首先需要下载myFocus库，网址http://www.chhua.com/myfocus/download.html

直接下载demo就可以了，里面带有所以库，和演示效果。

然后把demo中的js文件拷贝到你的工程下，然后在工程中引入库

<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link  href="js/mf-pattern/mF_fancy.css" rel="stylesheet" type="text/css"/>

库中有很多动画样式，每个动画样式都有两个文件，一个是js文件，一个是层叠样式文件，两个都要引入，见上面代码，我选择了其中一个样式。

然后在自己的工程中添加自己的照片，代码如下

<div class="ad" id="picBox">
	<div class="loading"><img src="images/loading.gif" alt="图片加载中"/></div>
	<div class="pic">
        <ul>
            <li><img src="images/ad2.jpg"></li>
            <li><img src="images/ad3.jpg"></li>
            <li><img src="images/ad4.jpg"></li>
        </ul>
    </div>
</div>

必须要用一个大的div嵌套一个小的div，而且小的div的class属性必须为pic，因为在页面刷新的时候会有一段时间的延时，所以最好加上一个loading图片提示一下。

css样式是这样的，为了让图片不溢出父元素div 所以溢出要hidden掉。

<style>
	.ad {
		margin:auto;
		height:310px;
		width:1000px;
		overflow:hidden;}
</style>

好了基本工作准备好了下面见证奇迹的时刻到了

下面就是js的样式的书写了

<script>
	myFocus.set({
		id:'picBox'})
</script>

好了现在就可以查看效果了，是不是很简单啊，赶紧自己动手试一试吧。