JS 实现 div 滑动效果，模拟平面滑动，模拟平面滑动效果
本来想找个现成的代码，找了很久 要不是 轮播页面切换效果，要不就是翻书翻页的效果。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <style> .list{ margin:100px; width:500px; height:250px; position:relative; overflow:hidden; border:1px solid #ccc; } .list div{ border:1px solid #ccc; width:200px; height:200px; background:#fff; position: absolute; } </style> </head> <body> <div class="list"> <div class="act" style=""><img src="./picture/pic1.png"> </img> <a class="a" href="javascript:;" ></a> </div> <div style=""><img src="./picture/pic2.png"> </img> <a class="a" href="javascript:;" ></a> </div> <div style=""><img src="./picture/pic3.png"> </img> <a class="a" href="javascript:;" ></a> </div> <div style=""><img src="./picture/pic4.png"> </img> <a class="a" href="javascript:;" ></a> </div> </div> <script> $(function () { slide(); }); function slide() { var timer = null; var ds = $('.list div'), L = ds.length, ii = 1,list = 4,i = 0; function sliding() { var el = $(this).parent('div'); var n = $(ds[i]); n.css({ left: 300, zIndex: ii++ }).animate({ left: 0 }, 2000) i++; if(i==4) {i=0} } timer = setInterval(sliding, 6000); } </script> </body> </html>
