我正在尝试制作幻灯片，我只是从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>
答案 0 :(得分：0)
问题是图像的宽高比不同。您可能只想限制高度。当您在每个图像之间切换时，这将使网站不那么跳跃。实际上，处理此问题的最佳方法是将图像裁剪为相同的大小。您可以使用简单的图像编辑工具执行此操作，例如Windows上的Paint或Gimp。
答案 1 :(得分：0)
嗨，请查看此内容以获取参考https://plnkr.co/edit/Fbn9OFn5czK6XlHi6hQH?p=preview
添加此课程
#!/bin/sh
set -e
git init
git commit --allow-empty -m init
git tag init
for i in $(seq 1 10)
do
sleep 1
git commit --allow-empty -m b$i
git branch b$i
git reset --hard init
done
for i in $(seq 1 10)
do
sleep 1
git merge --no-edit b$i
done
git branch merge1
git reset --hard init
for i in $(seq 1 10)
do
sleep 1
git merge --no-edit b$i
done