完美兼容IE6的js立体图片轮播效果
- 作者：我爱模版网
- 大小：0.385MB
- 点击次数：
- 发布时间：2014-02-14 14:03
特效介绍
js立体图片轮播效果，可以无限循环下去。完美兼容IE6等古董级浏览器。可在几乎任何主流浏览器上运行
使用方法
1、在头部引入下面代码：
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/comm.js" type="text/javascript"></script>
<script>
$(function(){
new ZoomPic("jswbox");
})
</script>
2、把以下代码拷贝到你想引用的地方
<div id="jswbox">
<pre class="prev">prev</pre>
<pre class="next">next</pre>
<ul>
<li style="display: block; width: 262px; height: 389px; top: 152px; left: 0px; z-index: 1; "><img src="images/1.jpg" data-url="images/13721449166318.jpg" alt="derrick" style="opacity: 87; "></li>
<li style="display: block; width: 262px; height: 389px; top: 152px; left: 0px; z-index: 2; "><img src="images/2.jpg" data-url="images/13721447673663.jpg" alt="MAGGIE" style="opacity: 87; "></li>
<li style="display: block; width: 262px; height: 389px; top: 152px; left: 200px; z-index: 3; "><img src="images/3.jpg" data-url="images/1372144645552.jpg" alt="许在浩" style="opacity: 87; "></li>
<li style="display: block; width: 300px; height: 445px; left: 388px; z-index: 4; top: 124px; "><img src="images/4.jpg" data-url="images/13721443987501.jpg" alt="颜子超" style="opacity: 87; "></li>
<li style="display: block; width: 262px; height: 389px; left: 668px; z-index: 3; top: 152px; "><img src="images/5.jpg" data-url="images/13721468495688.jpg" alt="万玲玲" style="opacity: 87; "></li>
<li style="display: block; width: 262px; height: 389px; left: 834px; z-index: 2; top: 152px; "><img src="images/6.jpg" data-url="images/13721449166318.jpg" alt="derrick" style="opacity: 87; "></li>
<li style="display: block; width: 262px; height: 389px; top: 152px; left: 450px; z-index: 1; "><img src="images/7.jpg" data-url="images/13721447673663.jpg" alt="MAGGIE" style="opacity: 87; "></li>
</ul>
</div>
注：new ZoomPic("jswbox");为调用插件里的函数，参数“jswbox”为轮播最外层的div的id，可以自定义。
- 本文标签：
- js图片轮播,立体图片轮播,网页图片轮播
