<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" >
$(function(){
//切换速度
var swithSpeed = 500;
//每页宽度
var pageWidth = $('#container').css('width');
$('#content table tr td').css('width',pageWidth);
//设置高度
$('#content table tr td').css('height',$('#container').css('height'));
$('#content').css('width',$('#container').css('height'));
//去掉px字符,转换成int类型
var pageWidthNum=parseInt(pageWidth.substring(0,pageWidth.length-2));
//content 宽度
$('#content').css('width',$('#content table tr td').length*pageWidthNum);
//第一页和最后一页交换位置
$('table td:first').before($('table td:last'));
//面板初始化left为-pageWidth(一页的宽度)，即先向左窜一页
$('#content').css('left','-'+pageWidth);
//按钮事件
$('#prev').click(function(){
//原始left
var orLeft = $('#content').css('left');
//目标left
var newLeft = parseInt(orLeft.substring(0,orLeft.length-2))-pageWidthNum;
if(!$('#content').is(":animated")){//如果未处在执行动画的状态
$("#content").animate({left:newLeft+'px'},swithSpeed,function(){
//前后页位置调换
$('table td:last').after($('table td:first'));
//left位置还原
$("#content").css("left",newLeft+pageWidthNum+'px');
});
}
});
$('#next').click(function(){
//原始left
var orLeft = $('#content').css('left');
//目标left
var newLeft = parseInt(orLeft.substring(0,orLeft.length-2))+pageWidthNum;
if(!$('#content').is(":animated")){//如果未处在执行动画的状态
$("#content").animate({left:newLeft+'px'},swithSpeed,function(){
//前后页位置调换
$('table td:first').before($('table td:last'));
//left位置还原
$("#content").css("left",newLeft-pageWidthNum+'px');
});
}
});
//定时切换
//var interval = setInterval(function(){
// $('#prev').click();
//},3000)
//clearInterval(interval) //清除定时
});
</script>
<style type = "text/css">
#container{
background-color:#278382;
height:500px;
width:400px;
overflow:hidden;
}
#content{
position:absolute;
}
</style>
</head>
<body>
<a id = "prev" href = "javascript:void();">前</a>
<a id = "next" href = "javascript:void();">后</a>
<div id = "container" style = "">
<div id = "content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class = "page" style = "background-color:#287382">
<div style= "width:100%;height:100%;">这里是第一页的内容</div>
</td>
<td class = "page" style = "background-color:#233382">
<div style = "width:100%;height:100%">
q
</div>
</td>
<td class = "page" style = "background-color:#287111">3</td>
<td class = "page" style = "background-color:#2aaa82">4</td>
<td class = "page" style = "background-color:#244482">5</td>
<td class = "page" style = "background-color:#244482">6</td>
<td class = "page" style = "background-color:#244482">7</td>
<td class = "page" style = "background-color:#244482">8</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" >
$(function(){
//切换速度
var swithSpeed = 500;
//每页宽度
var pageWidth = $('#container').css('width');
$('#content table tr td').css('width',pageWidth);
//设置高度
$('#content table tr td').css('height',$('#container').css('height'));
$('#content').css('width',$('#container').css('height'));
//去掉px字符,转换成int类型
var pageWidthNum=parseInt(pageWidth.substring(0,pageWidth.length-2));
//content 宽度
$('#content').css('width',$('#content table tr td').length*pageWidthNum);
//第一页和最后一页交换位置
$('table td:first').before($('table td:last'));
//面板初始化left为-pageWidth(一页的宽度)，即先向左窜一页
$('#content').css('left','-'+pageWidth);
//按钮事件
$('#prev').click(function(){
//原始left
var orLeft = $('#content').css('left');
//目标left
var newLeft = parseInt(orLeft.substring(0,orLeft.length-2))-pageWidthNum;
if(!$('#content').is(":animated")){//如果未处在执行动画的状态
$("#content").animate({left:newLeft+'px'},swithSpeed,function(){
//前后页位置调换
$('table td:last').after($('table td:first'));
//left位置还原
$("#content").css("left",newLeft+pageWidthNum+'px');
});
}
});
$('#next').click(function(){
//原始left
var orLeft = $('#content').css('left');
//目标left
var newLeft = parseInt(orLeft.substring(0,orLeft.length-2))+pageWidthNum;
if(!$('#content').is(":animated")){//如果未处在执行动画的状态
$("#content").animate({left:newLeft+'px'},swithSpeed,function(){
//前后页位置调换
$('table td:first').before($('table td:last'));
//left位置还原
$("#content").css("left",newLeft-pageWidthNum+'px');
});
}
});
//定时切换
//var interval = setInterval(function(){
// $('#prev').click();
//},3000)
//clearInterval(interval) //清除定时
});
</script>
<style type = "text/css">
#container{
background-color:#278382;
height:500px;
width:400px;
overflow:hidden;
}
#content{
position:absolute;
}
</style>
</head>
<body>
<a id = "prev" href = "javascript:void();">前</a>
<a id = "next" href = "javascript:void();">后</a>
<div id = "container" style = "">
<div id = "content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class = "page" style = "background-color:#287382">
<div style= "width:100%;height:100%;">这里是第一页的内容</div>
</td>
<td class = "page" style = "background-color:#233382">
<div style = "width:100%;height:100%">
q
</div>
</td>
<td class = "page" style = "background-color:#287111">3</td>
<td class = "page" style = "background-color:#2aaa82">4</td>
<td class = "page" style = "background-color:#244482">5</td>
<td class = "page" style = "background-color:#244482">6</td>
<td class = "page" style = "background-color:#244482">7</td>
<td class = "page" style = "background-color:#244482">8</td>
</tr>
</table>
</div>
</div>
</body>
</html>
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
