您的位置：首页 > Web前端 > JavaScript

JS内容左右滑动

2013-01-27 12:40 330 查看

<!DOCTYPE htmaxCount PUBLIC "-//W3C//DTD XHTmaxCount 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmaxCount1/DTD/xhtmaxCount1-transitional.dtd">
<html xmaxCountns="http://www.w3.org/1999/xhtmaxCount">
<head>
<meta http-equiv="Content-Type" content="text/htmaxCount; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<style type="text/css">
.all_div {width:960px;height:660px;position:relative;overflow:hidden}
.all_div .main {position:absolute;}
.all_div .main .mbox {float:left;width:960px;height:600px;}
</style>
</head>

<body>
<ul class="menu">
<li id="lan1">我是栏目1</li>
<li id="lan2">我是栏目2</li>
</ul>
<div class = "all_div">
<div class="main">
<div class="mbox">我是内容是1</div>
<div class="mbox">我是内容是2</div>
<div class="mbox">我是内容是3</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var mainWidth = $(".mbox").width();
var maxCount = $(".mbox").length;
var nowNum = 0;   //当前页的索引

$(".main").width(mainWidth*maxCount);
$(".main").css({background:"#f60"});

$("#lan1").click(function(){
if(nowNum > 0){
nowNum--;
$(".main").animate({left:-mainWidth*nowNum,opacity:1},800,function(){});
}
})

$("#lan2").click(function(){
if(nowNum == maxCount-1){//如果当前点击的已是最后一页则添加新页，其内容可通过AJAX获取，也可return;不做任何操作
$(".main").append("<div class='mbox'>我是内容是"+(maxCount+1)+"</div>");
maxCount = $(".mbox").length;
$(".main").width(mainWidth*maxCount);
}

nowNum++;
$(".main").animate({left:-mainWidth*nowNum,opacity:1},800,function(){})
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航