滑动 div

最新推荐文章于 2023-12-12 16:02:08 发布

xianpeng2020

最新推荐文章于 2023-12-12 16:02:08 发布

阅读量624

点赞数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.wrap {float:left; position:relative; width:247px; height:150px; z-index:1; overflow:hidden;}
.cc {height:140px; position:absolute; top:0px; left:-494px; z-index:2;overflow:hidden}
.btn {float:left; width:11px; margin-top:70px; z-index:3}
.cc p.con {width:238px; height:135px; background:#ffecc4}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>
<script type="text/javascript"">
$(document).ready(function(){
var leftsize = -494;
$("#btn_l").click(function(){
if(leftsize > -247){
leftsize = leftsize - 247;
$(".cc").animate({"left":leftsize});
}
else if(leftsize = -247) {
leftsize = leftsize - 247;
$(".cc").animate({"left":leftsize});
}
else {$(".cc").css('left','0px');}
});

$("#btn_r").click(function(){
if(leftsize < -247){
leftsize = leftsize + 247;
$(".cc").animate({"left":leftsize});
}
else if(leftsize = -247) {
leftsize = leftsize + 247;
$(".cc").animate({"left":leftsize});
}
else{$(".cc").css('left','-494px');}

});
});
</script>
</head>

<body>

<div id="btn_l" class="btn"><</div>
<div class="wrap">
<div class="cc" style="width:741px;">
<div style="float:left;width:241px;padding:5px 3px;">
<p class="con">111</p>
</div>
<div style="float:left;width:241px;padding:5px 3px; ">
<p class="con">222</p>
</div>
<div style="float:left;width:241px;padding:5px 3px; ">
<p class="con">333</p>
</div>
</div>
</div>
<div id="btn_r" class="btn">></div>

</body>
</html>