CSS3：翻译时文本留在框中
CSS3: Text stay in the box when translated
我已经在 CSS3/javascript 中进行了幻灯片演示，但这不能正常工作..
当你点击箭头时，"diapos" div 会朝着一个方向移动，但在我的例子中，方框内的文字并没有完全移动，一小部分文字留在了下一张幻灯片
function clic_left() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo1.style.left=left2+"px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo2.style.left=left2+"px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo3.style.left=left2+"px";
}
function clic_right() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo1.style.left=left2+"px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo2.style.left=left2+"px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo3.style.left=left2+"px";
}
#arrow_left {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
opacity: 0.3;
}
#arrow_right {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
right: 5%;
opacity: 0.3;
}
#arrow_right:hover {
displa y: block;
opacity: 1;
transform: translate(5px);
cursor: pointer;
}
#arrow_left:hover {
display: block;
opacity: 1;
transform: translate(-5px);
cursor: pointer;
}
.bordure_left {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
left: 0px;
bottom: 0px;
z-index: 9;
}
.bordure_right {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
right: 0px;
bottom: 0px;
z-index: 9;
}
.centre {
position: absolute;
height: 100em;
width: 1020px;
margin: 118px;
margin-top: 3em;
border: 5px solid;
z-index: 1;
}
#diapo1 {
position: absolute;
left: 0px;
z-index: 1;
transition: 1s;
}
#diapo2 {
position: absolute;
left: 2000px;
z-index: 1;
transition: 1s;
}
#diapo3 {
position: absolute;
left: 4000px;
z-index: 1;
transition: 1s;
}
.robot {
text-align: center;
white-space: normal;
text-shadow: 1px 2px grey;
color: black;
font-size: 1.5em;
font-family: SaborDigital;
word-spacing: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet SIN</title>
<link href="css/style.css" rel=stylesheet type="text/css" />
<script src="js/slide.js"></script>
</head>
<body scroll="no" style="overflow: hidden"> <!-- no scroll -->
<div class="bordure_left">
<p id="arrow_left" onclick="clic_left()">ARROW<p>
</div>
<div class="bordure_right">
<p id="arrow_right" onclick="clic_right()">ARROW<p>
</div>
<div class="centre">
<div id="diapo1">
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo2">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo3">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
</div>
</body>
点击 "arrow" 按钮进行翻译
你做得很好，请记住 position 和 display 是棘手的 CSS 选项，你需要通过尝试和理解它们的作用来掌握它们。
您的示例在 #diapo* 元素上缺少一些 width 和 height。 p开始填补缺失的space.
我添加了一些background-color，所以你可以更容易地调试它。
参考文献：
https://zellwk.com/blog/css-positions/ 和
https://developer.mozilla.org/en-US/docs/Web/CSS/display
function clic_left() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo1.style.left = left2 + "px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo2.style.left = left2 + "px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo3.style.left = left2 + "px";
}
function clic_right() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo1.style.left = left2 + "px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo2.style.left = left2 + "px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo3.style.left = left2 + "px";
}
#arrow_left {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
opacity: 0.3;
}
#arrow_right {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
right: 5%;
opacity: 0.3;
}
#arrow_right:hover {
display: block;
opacity: 1;
transform: translate(5px);
cursor: pointer;
}
#arrow_left:hover {
display: block;
opacity: 1;
transform: translate(-5px);
cursor: pointer;
}
.bordure_left {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
left: 0px;
bottom: 0px;
z-index: 9;
}
.bordure_right {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
right: 0px;
bottom: 0px;
z-index: 9;
}
.centre {
position: relative; /* changed */
height: 100em;
width: 1020px;
margin: 118px;
margin-top: 3em;
border: 5px solid;
z-index: 1;
}
#diapo1 {
position: absolute;
left: 0px;
z-index: 1;
transition: 1s;
background: red;
height: 100%; /* changed */
width: 100%; /* changed */
}
#diapo2 {
position: absolute;
left: 2000px;
z-index: 1;
transition: 1s;
background: blue;
height: 100%; /* changed */
width: 100%; /* changed */
}
#diapo3 {
position: absolute;
left: 4000px;
z-index: 1;
transition: 1s;
background: green;
height: 100%; /* changed */
width: 100%; /* changed */
}
.robot {
display: block;
height: 100%;
width: 100%;
text-align: center;
white-space: normal;
text-shadow: 1px 2px grey;
color: black;
font-size: 1.5em;
font-family: SaborDigital;
word-spacing: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet SIN</title>
<link href="css/style.css" rel=stylesheet type="text/css" />
<script src="js/slide.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
<!-- no scroll -->
<div class="bordure_left">
<p id="arrow_left" onclick="clic_left()">ARROW
<p>
</div>
<div class="bordure_right">
<p id="arrow_right" onclick="clic_right()">ARROW
<p>
</div>
<div class="centre">
<div id="diapo1">
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo2">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo3">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
</div>
</body>
我已经在 CSS3/javascript 中进行了幻灯片演示，但这不能正常工作..
当你点击箭头时，"diapos" div 会朝着一个方向移动，但在我的例子中，方框内的文字并没有完全移动，一小部分文字留在了下一张幻灯片
function clic_left() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo1.style.left=left2+"px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo2.style.left=left2+"px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo3.style.left=left2+"px";
}
function clic_right() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo1.style.left=left2+"px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo2.style.left=left2+"px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo3.style.left=left2+"px";
}
#arrow_left {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
opacity: 0.3;
}
#arrow_right {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
right: 5%;
opacity: 0.3;
}
#arrow_right:hover {
displa y: block;
opacity: 1;
transform: translate(5px);
cursor: pointer;
}
#arrow_left:hover {
display: block;
opacity: 1;
transform: translate(-5px);
cursor: pointer;
}
.bordure_left {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
left: 0px;
bottom: 0px;
z-index: 9;
}
.bordure_right {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
right: 0px;
bottom: 0px;
z-index: 9;
}
.centre {
position: absolute;
height: 100em;
width: 1020px;
margin: 118px;
margin-top: 3em;
border: 5px solid;
z-index: 1;
}
#diapo1 {
position: absolute;
left: 0px;
z-index: 1;
transition: 1s;
}
#diapo2 {
position: absolute;
left: 2000px;
z-index: 1;
transition: 1s;
}
#diapo3 {
position: absolute;
left: 4000px;
z-index: 1;
transition: 1s;
}
.robot {
text-align: center;
white-space: normal;
text-shadow: 1px 2px grey;
color: black;
font-size: 1.5em;
font-family: SaborDigital;
word-spacing: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet SIN</title>
<link href="css/style.css" rel=stylesheet type="text/css" />
<script src="js/slide.js"></script>
</head>
<body scroll="no" style="overflow: hidden"> <!-- no scroll -->
<div class="bordure_left">
<p id="arrow_left" onclick="clic_left()">ARROW<p>
</div>
<div class="bordure_right">
<p id="arrow_right" onclick="clic_right()">ARROW<p>
</div>
<div class="centre">
<div id="diapo1">
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo2">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo3">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
</div>
</body>
点击 "arrow" 按钮进行翻译
你做得很好，请记住 position 和 display 是棘手的 CSS 选项，你需要通过尝试和理解它们的作用来掌握它们。
您的示例在 #diapo* 元素上缺少一些 width 和 height。 p开始填补缺失的space.
我添加了一些background-color，所以你可以更容易地调试它。
参考文献： https://zellwk.com/blog/css-positions/ 和 https://developer.mozilla.org/en-US/docs/Web/CSS/display
function clic_left() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo1.style.left = left2 + "px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo2.style.left = left2 + "px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo3.style.left = left2 + "px";
}
function clic_right() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo1.style.left = left2 + "px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo2.style.left = left2 + "px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo3.style.left = left2 + "px";
}
#arrow_left {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
opacity: 0.3;
}
#arrow_right {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
right: 5%;
opacity: 0.3;
}
#arrow_right:hover {
display: block;
opacity: 1;
transform: translate(5px);
cursor: pointer;
}
#arrow_left:hover {
display: block;
opacity: 1;
transform: translate(-5px);
cursor: pointer;
}
.bordure_left {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
left: 0px;
bottom: 0px;
z-index: 9;
}
.bordure_right {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
right: 0px;
bottom: 0px;
z-index: 9;
}
.centre {
position: relative; /* changed */
height: 100em;
width: 1020px;
margin: 118px;
margin-top: 3em;
border: 5px solid;
z-index: 1;
}
#diapo1 {
position: absolute;
left: 0px;
z-index: 1;
transition: 1s;
background: red;
height: 100%; /* changed */
width: 100%; /* changed */
}
#diapo2 {
position: absolute;
left: 2000px;
z-index: 1;
transition: 1s;
background: blue;
height: 100%; /* changed */
width: 100%; /* changed */
}
#diapo3 {
position: absolute;
left: 4000px;
z-index: 1;
transition: 1s;
background: green;
height: 100%; /* changed */
width: 100%; /* changed */
}
.robot {
display: block;
height: 100%;
width: 100%;
text-align: center;
white-space: normal;
text-shadow: 1px 2px grey;
color: black;
font-size: 1.5em;
font-family: SaborDigital;
word-spacing: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet SIN</title>
<link href="css/style.css" rel=stylesheet type="text/css" />
<script src="js/slide.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
<!-- no scroll -->
<div class="bordure_left">
<p id="arrow_left" onclick="clic_left()">ARROW
<p>
</div>
<div class="bordure_right">
<p id="arrow_right" onclick="clic_right()">ARROW
<p>
</div>
<div class="centre">
<div id="diapo1">
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo2">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo3">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
</div>
</body>