试图创建jquery/javascript函数来切换显示的div，在向后切换时出现小故障
所以在html中，我使用了bootstrap的jumbotron样式的div。当你点击一个按钮时会显示一个页面，一个点击操作会调用函数试图创建jquery/javascript函数来切换显示的div，在向后切换时出现小故障,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,所以在html中，我使用了bootstrap的jumbotron样式的div。当你点击一个按钮时会显示一个页面，一个点击操作会调用函数flipage（{从页面切换到页面}，{切换到页面}），然后出现翻转（{从页面切换到页面}，{切换到页面}） 我的问题是，动画被搞砸了，它会重复或切换到错误的页面，我对jQuery动画了解不够，无法判断我是否做错了什么。任何提示或帮助都将不胜感激！我相信它调用了错误的函数？可能吗？可能是把按钮调高了 对于错误，如果您让代码运行它，通常在您从页面1->2，2->3，
flipage（{从页面切换到页面}，{切换到页面}）翻转（{从页面切换到页面}，{切换到页面}）1->2，2->3，3->2，2->1 <div class="container">
<div id="page1" class="jumbotron page1" style="">
<h1 style="text-align:center; width:564px">Welcome to page 3</h1>
<button class="btn btn-primary" type="button" onClick="flipPage(1,2)"> Next Page</button>
</div>
<div id="page2" class="jumbotron page2" style="">
<h1 style="text-align:center; width:564px">Welcome to page 2</h1>
<button class="btn btn-primary" type="button" onClick="flipPage(2,3)">Next Page ></button>
<button class="btn btn-primary" type="button" onClick="flipBack(2,1)"> Back</button>
</div>
<div id="page3" class="jumbotron page3" style="">
<h1 style="text-align:center; width:564px">Welcome to page 3</h1>
<button class="btn btn-primary" type="button" onClick="flipBack(3,2)"> Back</button>
</div>
</div>
$('#page2').hide();
$('#page3').hide();
function flipPage(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(document).ready(function() {
$(fromPage).click(function() {
$(fromPage).animate({left: '-150%'}, 500, function() {
$(fromPage).hide();
$(toPage).show().animate({left: '25%'},200, function(){
});
});
});
});
}
function flipBack(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(document).ready(function() {
$(fromPage).click(function() {
$(fromPage).animate({left: '150%'}, 500, function() {
$(fromPage).hide();
$(toPage).show().animate({left: '25%'},200, function(){
});;
});
});
});
}
<!-- the container: -->
<div id="pages-container" class="container" data-current-page="1">
<!-- each 'next' button: -->
<button class="btn btn-primary next-page-btn" type="button"> Next Page</button>
<!-- each 'back' button: -->
<button class="btn btn-primary back-page-btn" type="button"> Back</button>
试试这个。希望您所追求的是以下功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="css/favicon.ico">
<title>DeskOS</title>
<link rel="icon" type="image/x-icon" href="css/favicon.ico" />
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- JavaScript -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
.jumbotron.page1{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 25%;
}
.jumbotron.page2{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 150%;
}
.jumbotron.page3{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 150%;
}
</style>
<!-- Custom styles for this template -->
</head>
<div class="container">
<div id="page1" class="jumbotron page1" style="">
<h1 style="text-align:center; width:564px">Welcome to page1</h1>
<button class="btn btn-primary forward" type="button" data-next="2" data-current="1"> Next Page</button>
</div>
<div id="page2" class="jumbotron page2" style="">
<h1 style="text-align:center; width:564px">Welcome to page 2</h1>
<button class="btn btn-primary forward" type="button" data-next="3" data-current="2">Next Page ></button>
<button class="btn btn-primary back" type="button" data-back="1" data-current="2"> Back</button>
</div>
<div id="page3" class="jumbotron page3" style="">
<h1 style="text-align:center; width:564px">Welcome to page 3</h1>
<button class="btn btn-primary back" type="button" data-back="2" data-current="3"> Back</button>
</div>
</div>
<!-- /container -->
<script>
$(document).ready(function() {
$('#page2').hide();
$('#page3').hide();
$('.forward').click(function() {
$this = $(this);
flipPage($this.data('current'), $this.data('next'));
});
$('.back').click(function() {
$this = $(this);
flipBack($this.data('current'), $this.data('back'));
});
function flipPage(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(fromPage).animate({left: '-150%'}, 500, function() {
$(fromPage).hide();
$(toPage).animate({left: '25%'},200, function(){}).show();
});
}
function flipBack(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(fromPage).animate({left: '150%'}, 500, function() {
$(fromPage).hide();
$(toPage).animate({left: '25%'},200, function(){}).show();
});
}
});
</script>
</html>
德克斯
.jumbotron.page1{
位置：绝对位置；
宽度：750px；
高度：500px；
顶部：100px；
左：25%；
}
.jumbotron.page2{
位置：绝对位置；
宽度：750px；
高度：500px；
顶部：100px；
左：150%；
}
.jumbotron.page3{
位置：绝对位置；
宽度：750px；
高度：500px；
顶部：100px；
左：150%；
}
欢迎来到第一页
下一页
欢迎来到第2页
下一页>
返回
欢迎来到第三页
返回
$（文档）.ready（函数（）{
$（'#page2'）.hide（）；
$（“#第3页”）.hide（）；
$（'.forward'）。单击（函数（）{
$this=$（this）；
flipPage（$this.data（'current'），$this.data（'next'））；
});
$（'.back'）。单击（函数（）{
$this=$（this）；
反向（$this.data（'current'），$this.data（'back'）；
});
函数翻页（起始页，顶部页）
{
var fromPage=“#page”+fromPage；
var toPage=“#page”+toPage；
$（fromPage）.animate（{left:'-150%}，500，function（）{
$（fromPage.hide（）；
$（toPage）.animate（{left:'25%}，200，function（）{}）.show（）；
});
}
功能翻转（起始页，顶部页）
{
var fromPage=“#page”+fromPage；
var toPage=“#page”+toPage；
$（fromPage）.animate（{left:'150%}，500，function（）{
$（fromPage.hide（）；
$（toPage）.animate（{left:'25%}，200，function（）{}）.show（）；
});
}
});
<div class="container">
<div id="page1" class="jumbotron page1" style="">
<h1 style="text-align:center; width:564px">Welcome to page 3</h1>
<button class="btn btn-primary" type="button" onClick="flipPage(1,2)"> Next Page</button>
</div>
<div id="page2" class="jumbotron page2" style="">
<h1 style="text-align:center; width:564px">Welcome to page 2</h1>
<button class="btn btn-primary" type="button" onClick="flipPage(2,3)">Next Page ></button>
<button class="btn btn-primary" type="button" onClick="flipBack(2,1)"> Back</button>
</div>
<div id="page3" class="jumbotron page3" style="">
<h1 style="text-align:center; width:564px">Welcome to page 3</h1>
<button class="btn btn-primary" type="button" onClick="flipBack(3,2)"> Back</button>
</div>
</div>
$('#page2').hide();
$('#page3').hide();
function flipPage(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(document).ready(function() {
$(fromPage).click(function() {
$(fromPage).animate({left: '-150%'}, 500, function() {
$(fromPage).hide();
$(toPage).show().animate({left: '25%'},200, function(){
});
});
});
});
}
function flipBack(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(document).ready(function() {
$(fromPage).click(function() {
$(fromPage).animate({left: '150%'}, 500, function() {
$(fromPage).hide();
$(toPage).show().animate({left: '25%'},200, function(){
});;
});
});
});
}
<!-- the container: -->
<div id="pages-container" class="container" data-current-page="1">
<!-- each 'next' button: -->
<button class="btn btn-primary next-page-btn" type="button"> Next Page</button>
<!-- each 'back' button: -->
<button class="btn btn-primary back-page-btn" type="button"> Back</button>
.jumbotron.page1{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 25%;
}
.jumbotron.page2{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 150%;
}
.jumbotron.page3{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 150%;
}
$( document ).ready(function() {
// drop the pages to left * 10000
$('#page2').css({left: $('#page2').offset().left * 10000});
$('#page3').css({left: $('#page3').offset().left * 10000});
});
演示：只是出于好奇，你是怎么做到的？返回的数据和当前的数据完成了什么？数据属性用于在当前状态下传递数据和您尝试翻转到的页面。所有内容都包装在.ready函数中，以便在dom就绪时绑定单击事件。你写的逻辑很好。现在您只需要在元素上使用forward或back类，单击事件就可以正常工作。谢谢您学到了一些新东西！我将把它添加到我的git中，以便其他人可以使用该代码，我已经使它更加通用，我想包括你的名字作为感谢。好吧，如果你同意的话！谢谢你的努力！你的代码无法完成幻灯片，因为我需要完成它。但我从观察你所做的改变中学到了很多，你所做的一些真正有趣的事情。
$( ".next-page-btn" ).click(function() {
// get current page number
currentPage = parseInt($( "#pages-container" ).attr('data-current-page'));
nextPage(currentPage, currentPage + 1);
// update current page number
$( "#pages-container" ).attr('data-current-page', currentPage + 1);
});
$( ".back-page-btn" ).click(function() {
// get current page number
currentPage = parseInt($( "#pages-container" ).attr('data-current-page'));
backPage(currentPage, currentPage - 1);
// update current page number
$( "#pages-container" ).attr('data-current-page', currentPage - 1);
});