图片轮换的效果随处可见，但是我还是试着封装了一个函数。一个页面上可以多次调用。。。由于初学代码写的不是多好，其中有个文件是可以踢出到一个js文件里的，这是为了测试方便，我都给放在了一个页面里了。
其中如果有问题，有更好的意见或者建议都可在最后留言，都将对您感激不尽。
具体的代码如下：
复制代码 代码如下:
body, div { margin: 0; paading: 0; font-size: 12px; }
ul, li { margin: 0; padding: 0; list-style: none; }
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; }
.left { float: left; }
.right { float: right; }
ul, li { margin: 0; padding: 0; list-style: none; }
.box { width: 960px; margin: 0 auto; padding-top: 15px; }
.flash { position: relative; width: 360px; height: 280px; overflow: hidden; }
.list { position: relative; width: 360px; height: 260px; overflow: hidden; }
.list li img{ position: absolute; left: 0; top: 0; width: 360px; height: 260px;}
.list li { display: none; }
.list .over { display: block;}
.btn { position: absolute; top: 233px; width: 360px; height: 26px; background: #000; line-height: 26px; opacity: 0.7; filter: alpha(opacity=70); text-align: right; }
.btn a { padding: 2px 5px; margin: 0 2px; border: 1px solid #fff; border-radius: 2px; background: #000; color: #fff; text-decoration: none; cursor: pointer; }
.btn .over { background: #f00; }
.btn2 { position: absolute; top: 206px; height:62px; }
.btn2 img { width: 70px; height: 60px; border: 1px solid #ccc; }
.btn2 .over img { border: 1px solid #f00; }
.flash2 { position: relative; width: 800px; }
.flash2 .list { float: left; }
.flash2 .btn2 { float: left; position: static; width: 150px; height: 280px; }
.flash2 .btn2 img { width: 120px; height: 47px; }
12345
以上就是封装了一个js图片轮换效果的函数的详细内容，更多请关注本站其它相关文章！
