#css #translate
#css #перевести
Вопрос:
Я сделал слайд-презентацию на CSS3 / javascript, но это не работает должным образом..
При нажатии на стрелку div «diapos» перемещается в определенном направлении, но в моем случае текст внутри полей перемещается не полностью, и небольшая часть текста остается на следующем слайде
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> нажмите на кнопку «стрелка», чтобы выполнить перевод
Комментарии:
1. Просто из любопытства, вам обязательно нужно создавать это с нуля или вы можете / рассматривали возможность использования плагина Carousel или аналогичных компонентов?
2. Я делаю это для школьного проекта, поэтому хочу создать все с нуля
Ответ №1:
У вас все в порядке, просто помните, что position и display — это сложные опции CSS, которые вам нужно освоить, опробовав и поняв, что они делают.
В вашем примере отсутствовали некоторые width и height в #diapo* элементах. p Начал заполнять пробелы недостающего пространства.
Я добавил кое-что 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> Комментарии:
1. Спасибо! Мне нужно лучше понимать position в css, потому что вначале это может немного беспокоить, это позволит мне перестать задавать такого рода вопросы.
2. Продолжайте задавать вопросы, это тоже способ учиться. CSS сложный. Удачи вам в вашем проекте.