完美兼容IE6的js立体图片轮播效果

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，可以自定义。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！