html按钮更改图像

Question

我有一个网站，我目前正在定期更改图像，但是，我现在还希望能够通过按下按钮来更改它们。通常这很容易，但由于某种原因，结果是它只是使图像显示在彼此下方（这会向上和向下拉伸页面）。

另一个问题是我希望我的图像首先淡入屏幕（淡入 css 功能），然后在时间结束后淡出（淡出屏幕）。这应该发生在定期旋转（所以不是当一个人按下按钮时）。我什至不知道从哪里开始，但动画确实有效。

另一件事是，我还没有在这里发布太多，所以我可能做错了什么（在这里之前做过......）。感谢您提供任何帮助，我希望我已经提供了足够的代码和有关该问题的信息。如果不是这种情况，那么我将尝试尽快提供任何额外的信息，尽管我无法发送/显示图像，因为它们是私人的。

var slideIndex = 0;

showSlides();

var j = 0;

function chngImg(z) {

  j = z

}

function showSlides() {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  for (i = j; i < slides.length; i++) {

    slides[i].style.display = "none";

  }

  slideIndex++;

  if (slideIndex > slides.length) {

    slideIndex = 1

  }

  for (i = j; i < dots.length; i++) {

    dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex - 1].style.display = "block";

  dots[slideIndex - 1].className += " active";

  setTimeout(showSlides, 4000); // Change image every 4 seconds

}

<div class="slideshow-container">

  <div class="mySlides fade">

    <div class="numbertext">1 / 3</div>

    <img src="img/00.jpg" style="width:100%">

    <div class="text">img1</div>

  </div>

  <div class="mySlides fade">

    <div class="numbertext">2 / 3</div>

    <img src="img/01.jpg" style="width:100%">

    <div class="text">img2</div>

  </div>

  <div class="mySlides fade">

    <div class="numbertext">3 / 3</div>

    <img src="img/02.jpg" style="width:100%">

    <div class="text">img3</div>

  </div>

</div>

<br>

<div style="text-align:center">

  <button onclick="chngImg(0)"><span class="dot"></span> </button>

  <button onclick="chngImgo(1)"><span class="dot"></span> </button>

  <button onclick="chngImg(2)"><span class="dot"></span> </button>

</div>

Answer 1

试试这个：只需更改图片；）var slideNum = 0;showSlides();var slides,dots;function showSlides() {&nbsp; &nbsp; var i;&nbsp; &nbsp; slides = document.querySelectorAll(".mySlides");&nbsp; &nbsp; dots = document.querySelectorAll(".dot");&nbsp; &nbsp; for (i = 0; i < slides.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp;slides[i].style.display = "none";&nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; slideNum++;&nbsp; &nbsp; if (slideNum> slides.length) {slideNum = 1}&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; for (i = 0; i < dots.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; dots[i].className = dots[i].className.replace(" active", "");&nbsp; &nbsp; }&nbsp; &nbsp; slides[slideNum-1].style.display = "flex";&nbsp;&nbsp;&nbsp; &nbsp; dots[slideNum-1].className += " active";&nbsp; &nbsp; setTimeout(showSlides, 3000);&nbsp;}function currentSlide(num) {&nbsp; &nbsp; if (num> slides.length) {num = 1}&nbsp; &nbsp; else if(num<1){num = slides.length}&nbsp; &nbsp; for (i = 0; i < slides.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp;slides[i].style.display = "none";&nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; for (i = 0; i < dots.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; dots[i].className = dots[i].className.replace(" active", "");&nbsp; &nbsp; }&nbsp; &nbsp; slides[num-1].style.display = "flex";&nbsp;&nbsp;&nbsp; &nbsp; dots[num-1].className += " active";}.fade img{&nbsp; width:100%;}&nbsp; &nbsp; div.content {&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; }&nbsp; &nbsp; .box{&nbsp; &nbsp; &nbsp; margin: auto;&nbsp; &nbsp; &nbsp; width: 80%;&nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; .grey{&nbsp; &nbsp; &nbsp; background:rgb(204, 203, 203);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * {box-sizing: border-box;}&nbsp; &nbsp; body {font-family: Verdana, sans-serif;}&nbsp; &nbsp; .mySlides {display: none;}&nbsp; &nbsp; img {vertical-align: middle;}&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* Slideshow container */&nbsp; &nbsp; .slideshow-container {&nbsp; &nbsp; &nbsp; max-width: 1000px;&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; margin: auto;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* Caption text */&nbsp; &nbsp; .text {&nbsp; &nbsp; &nbsp; color: #f2f2f2;&nbsp; &nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; &nbsp; padding: 8px 12px;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; bottom: 8px;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* Number text (1/3 etc) */&nbsp; &nbsp; .numbertext {&nbsp; &nbsp; &nbsp; color: #f2f2f2;&nbsp; &nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; &nbsp; padding: 8px 12px;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* The dots/bullets/indicators */&nbsp; &nbsp; .dot {&nbsp; &nbsp; &nbsp; height: 15px;&nbsp; &nbsp; &nbsp; width: 15px;&nbsp; &nbsp; &nbsp; margin: 0 2px;&nbsp; &nbsp; &nbsp; background-color: #bbb;&nbsp; &nbsp; &nbsp; border-radius: 75%;&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; transition: background-color 1.5s ease;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .active {&nbsp; &nbsp; &nbsp; background-color: #717171;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* Fading animation */&nbsp; &nbsp; .fade {&nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation-name: fade;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation-duration: 5s;&nbsp; &nbsp; &nbsp; &nbsp; animation-name: fade;&nbsp; &nbsp; &nbsp; &nbsp; animation-duration: 5s;&nbsp; &nbsp; }&nbsp; &nbsp; .fadeOut {&nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation-name: fadeOut;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation-duration: 5s;&nbsp; &nbsp; &nbsp; &nbsp; animation-name: fadeOut;&nbsp; &nbsp; &nbsp; &nbsp; animation-duration: 5s;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; @-webkit-keyframes fade {&nbsp; &nbsp; &nbsp; from {opacity: .7}&nbsp;&nbsp; &nbsp; &nbsp; to {opacity: 1}&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; @keyframes fade {&nbsp; &nbsp; &nbsp; from {opacity: .7}&nbsp;&nbsp; &nbsp; &nbsp; to {opacity: 1}&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .fade-out {&nbsp; &nbsp; &nbsp; animation: fadeOut ease 5s;&nbsp; &nbsp; &nbsp; -webkit-animation: fadeOut ease 5s;&nbsp; &nbsp; }&nbsp; &nbsp; @keyframes fadeOut {&nbsp; &nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; opacity:1;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; opacity:0.7;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; @-webkit-keyframes fadeOut {&nbsp; &nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; opacity:1;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; opacity:0.7;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }<div class="slideshow-container">&nbsp; &nbsp; <div class="mySlides fade">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="numbertext">1 / 3</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" style="width:100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">img1</div>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div class="mySlides fade">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="numbertext">2 / 3</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" style="width:100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">img2</div>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div class="mySlides fade">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="numbertext">3 / 3</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" style="width:100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">img3</div>&nbsp; &nbsp; </div></div><br><div style="text-align:center">&nbsp; &nbsp; <button onclick="currentSlide(1)"><span class="dot"></span> </button>&nbsp; &nbsp; <button onclick="currentSlide(2)"><span class="dot"></span> </button>&nbsp; &nbsp; <button onclick="currentSlide(3)"><span class="dot"></span> </button></div>

Answer 2

不错的编码 - 可能会更好。随便修改<button&nbsp;onclick="chngImg(0)">至<button&nbsp;onclick="chngImg(0);showSlides()">它应该工作......