0
LinkКак сделать все фотографии в моем слайд-шоу одинакового размера?
Я пытаюсь сделать слайд-шоу, и я просто скопировал и вставил это с w3schools.com. Это сработало, но кнопки исчезли, и все изображения совершенно разных размеров. Даже если я делаю ширину: __ и прочее, оно не фиксируется ... Может ли кто-нибудь помочь мне с этим?
(редактирование: применяется код из источника)
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}html {
background-color: white;
}
table {
layout: fixed;
width: 100%;
align-content: center;
background-color: #00FFFA;
}
td {
width: 10%;
text-align: center;
color: black;
text-decoration: none;
-webkit-transition-duration: 0.2s;
}
a {
text-decoration: none;
}
td:hover {
background-color: white;
-webkit-transition-duration: 0.2s;
}
td:active {
background-color: #00F6FF;
color: white;
}
h1 {
color: black;
text-align: center;
}
.red {
width: 100%;
height: 12.5%;
background-color: red;
}
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: black;
}
a:active {
color: black;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 0;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
iframe {
float: left;
margin: 10px;
}
.mySlides img {
width: 100%;
height: 500px;
}<!DOCTYPE html>
<html>
<head>
<title>
Japon
</title>
</head>
<body>
<table>
<tr>
<td><a href="#Japon">Accueil</a>
</td>
<td><a href="#Population">Population</a>
</td>
<td><a href="#Climat">Climat</a>
</td>
<td><a href="#Tourisme">Tourism<a></td>
<td><a href="#Histoire">Histoire</a>
</td>
<td><a href="#Gouvernement">Gouvernement</a>
</td>
<td><a href="#Technologie">Technologie</a>
</td>
<td><a href="#Culture">Culture</td>
<td><a href="#Opinion">Opinion</td>
<td><a href="#Durabilite">Durabilite</td>
</tr>
</table>
<h1 id="Japon">Japon</h1>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1/10</div>
<img src="http://us.jnto.go.jp/heritage/images/main_heritage.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2/10</div>
<img src="http://www.officeholidays.com/images/slider/japan_03.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3/10</div>
<img src="http://www.binglebogfacts.com/wp-content/uploads/2016/03/The-Worlds-Oldest-Company-operated-in-Japan-from-578-AD-to-2006..jpg" style="width:100%">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<hr>
<h1 id="Population">Population</h1>
<iframe width="600" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1WPkIPZqfM55PKyvaKmK9_PD-agxjKyMRQY8BtFFXeEk/pubchart?oid=1784900695&format=interactive"></iframe>
<p>La Japon a un de les plus grande populations dans le monde, avec 121,000,000 personnes. Ca c'est dixieme, mais seulement 38eme dans densite de population. L'image au gauche est un charte de population par les ages. Les personnes plus jeunne son't
dans la bas de la charte et les plus vieux son't dans la haut. La population de Japon decline un peut, et experts pense que la population vas etre reduire a un demi par 2082.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<h1 id="Climat">Climat</h1>
<hr>
<h1 id="Tourisme">Tourisme</h1>
<hr>
<h1 id="Histoire">Histoire</h1>
<hr>
<h1 id="Gouvernement">Gouvernement</h1>
<hr>
<h1 id="Technologie">Technologie</h1>
<hr>
<h1 id="Culture">Culture</h1>
<hr>
<h1 id="Opinion">Opinion</h1>
<hr>
<h1 id="Durabilite">Durabilite</h1>
код, необходимый здесь для лучшего понимания – Sami