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() {

    var i;

    slides = document.querySelectorAll(".mySlides");

    dots = document.querySelectorAll(".dot");

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

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

    }

    slideNum++;

    if (slideNum> slides.length) {slideNum = 1}    

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

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

    }

    slides[slideNum-1].style.display = "flex";  

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

    setTimeout(showSlides, 3000); 

}

function currentSlide(num) {

    if (num> slides.length) {num = 1}

    else if(num<1){num = 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[num-1].style.display = "flex";  

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

}

.fade img{

  width:100%;

}

    div.content {

        position: absolute;

        left: 0;

    }

    .box{

      margin: auto;

      width: 80%;

      padding: 10px;

    }

     

    .grey{

      background:rgb(204, 203, 203);

    }

    

    * {box-sizing: border-box;}

    body {font-family: Verdana, sans-serif;}

    .mySlides {display: none;}

    img {vertical-align: middle;}

    

    /* Slideshow container */

    .slideshow-container {

      max-width: 1000px;

      position: relative;

      margin: auto;

    }

    

    /* 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 {

      height: 15px;

      width: 15px;

      margin: 0 2px;

      background-color: #bbb;

      border-radius: 75%;

      display: inline-block;

      transition: background-color 1.5s ease;

    }

    

    .active {

      background-color: #717171;

    }

    

    /* Fading animation */

    .fade {

        -webkit-animation-name: fade;

        -webkit-animation-duration: 5s;

        animation-name: fade;

        animation-duration: 5s;

    }

    .fadeOut {

        -webkit-animation-name: fadeOut;

        -webkit-animation-duration: 5s;

        animation-name: fadeOut;

        animation-duration: 5s;

    }

    

    @-webkit-keyframes fade {

      from {opacity: .7} 

      to {opacity: 1}

    }

    

    @keyframes fade {

      from {opacity: .7} 

      to {opacity: 1}

    }

    

    .fade-out {

      animation: fadeOut ease 5s;

      -webkit-animation: fadeOut ease 5s;

    }

    @keyframes fadeOut {

      0% {

        opacity:1;

      }

      100% {

        opacity:0.7;

      }

    }

    

    @-webkit-keyframes fadeOut {

      0% {

        opacity:1;

      }

      100% {

        opacity:0.7;

      }

    }

<div class="slideshow-container">

    <div class="mySlides fade">

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

                <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" style="width:100%">

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

    </div>

    

    <div class="mySlides fade">

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

                <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" style="width:100%">

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

    </div>

    

    <div class="mySlides fade">

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

                <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" style="width:100%">

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

    </div>

</div>

<br>

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

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

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

    <button onclick="currentSlide(3)"><span class="dot"></span> </button>

</div>

Answer 2

不错的编码 - 可能会更好。
随便修改

<button onclick="chngImg(0)">

至

<button onclick="chngImg(0);showSlides()">

它应该工作......