Javascript 尝试使用css和js执行多个页面滑块

我希望当我调用第2页时，这会产生滑块效果并显示div。添加200%的宽度或其他。但是我需要一些帮助。有人能帮我吗

身体{
溢出：隐藏；
}
.第页{
位置：绝对位置；
填充：12px；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.第页，左{
-webkit转换：translate3d（-100%，0，0）；
转换：translate3d（-100%，0，0）；
}
.页面中心{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.第页，对{
-webkit转换：translate3d（100%，0，0）；
转换：translate3d（100%，0，0）；
}
.page.transition{
-webkit转换持续时间：.25s；
过渡持续时间：.25s；
}
主页
第1页
var homePage=document.getElementById（“主页”）；
var page1=document.getElementById（“p1”）；
var currentPage=主页；
函数slidePageFrom（第页，从）{
//将页面定位在动画的起始位置
page.className=“page”+from；
//使用指示动画持续时间的过渡类将新页面和当前页面定位在动画的结束位置
page.className=“页面转换中心”；
currentPage.className=“页面转换”+（from==“左”？“右”：“左”）；
当前页面=第页；
}

提前感谢

添加行：

var page2 = document.getElementById("p2");

此版本的代码更好：

---

祝你好运

您可以使用

调用第2页。您将

page2

声明为变量，但未声明它

您可以通过将这一行添加到JS代码中来修复它

var page2 = document.getElementById("p2");

但是，对于添加的每个新页面，都需要声明一个变量。如果您使用页面的

id

（您已经使用）使其成为动态的，则会更容易

您可以将HTML更改为（请注意

p1

、

p2

和

主页

周围的锚定中的单引号）：

---

你可以找到一个答案。

你能把问题说清楚吗？？我不明白你在说什么，你错过了第2页。请看，在控制台中第2页是非常好的，它与动态更容易。谢谢@黑代码，欢迎你！如果答案适合你，请将它标记为解决方案（在它的左边有v标记）。如果我想使左滑块效果看起来很奇怪。我怎样才能修好它斯奈斯！这也是个好方法！谢谢

var page2 = document.getElementById("p2");

<!-- PAG 1 -->
<div id="homePage" class="page transition center" style="background-color: #5AAED5">
    <h1>Home Page</h1>
    <a href="javascript:slidePageFrom('p1', 'right');">Page 1</a><br/>
    <a href="javascript:slidePageFrom('p2', 'right');">Page 2</a>
</div>
<!-- PAG 2 -->
<div id="p1" class="page transition right" style="background-color: #8ca83d">
    <h1>Page 1</h1>
    <a href="javascript:slidePageFrom('homePage', 'left');">Back</a>
</div>
<!-- PAG 2 -->
<div id="p2" class="page transition right" style="background-color: #8ca83d">
    <h1>Page 2</h1>
    <a href="javascript:slidePageFrom('homePage', 'left');">Back</a>
</div>

var currentPage = document.getElementById('homePage');

function slidePageFrom(page, from) {
    // Position the page at the starting position of the animation
    var page = document.getElementById(page);
    page.className = "page " + from;

    // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation
    page.className = "page transition center";
    currentPage.className = "page transition " + (from === "left" ? "right" : "left");
    currentPage = page;
}