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>