使用js插件实现图片轮播

使用js插件实现图片轮播，网上看到的myFocus插件下载地址 点击打开链接。

之前想写图片轮播，总写不好，今天发现有个有趣的插件，叫myFocus，上面有很多美观的图片轮播方式。

实现的方式很简单：

1 导入插件

<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>

2 给放图片的容器设定大小

#myFocus{ width:560px; height:300px;}

3 使用插件自带功能设定一些值

<script type="text/javascript">
//设置
myFocus.set({
id:'myFocus',//放图片容器的ID
pattern:'mF_fscreen_tb'//在下载的包里找到要用的风格
});
</script>

4 body内导入图片

<div id="myFocus"><!--焦点图盒子-->
<div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div><!--图片加载比较慢，此处可以导入进度条的gif图，图片导入后会自动消失-->
<div class="pic"><!--图片列表-->
<ul>
<li><a href="#1"><img src="img/1a.jpg" alt="图片1" /></a></li>
<li><a href="#2"><img src="img/2a.jpg" alt="图片2" /></a></li>
</ul>
</div>
</div>

--------------------

需要注意的是，放图片的<ul>需要用一个class="pic"的div包裹起来。即最少需要两个div。最外的div自己设定id，作为myFocus.set里面参数的值，另一个包裹ul的class值需要设定为“pic”（应该可以设为别的，不过就要去改插件里面的东西了。）