网上看到的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”(应该可以设为别的,不过就要去改插件里面的东西了。)