个人中心
gpt4 book ai didi

javascript - 如何使幻灯片中的所有图片大小相同？

转载 作者：行者123 更新时间：2023-11-28 05:39:41 24 4
gpt4 key购买 nike

Link

我正在尝试制作幻灯片，我只是从 w3schools.com 复制并粘贴了它。它起作用了，但是按钮消失了，而且图片的尺寸完全不同。即使我做了 width:__ 之类的东西，它也没有得到修复......有人可以帮我解决这个问题吗？

(编辑:应用源代码)

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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</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&amp;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>

最佳答案

问题是图像的纵横比不同。您可能只想限制高度。当您在每个图像之间切换时，这将使网站不那么跳动。实际上，处理此问题的最佳方法是将图像裁剪为相同大小。您可以使用简单的图像编辑工具(例如 Windows 上的画图或 Gimp)执行此操作。

关于javascript - 如何使幻灯片中的所有图片大小相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37980684/

24 4 0
文章推荐： jquery - 物化 CSS : Getting accordian to work when set on top of parallax
文章推荐： swift - UIImageView 缩小底部空间
文章推荐： javascript - 使用具有多边形形状的 Bootstrap 网格创建布局
文章推荐： html - CakePHP-Bootstrap 崩溃不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com