当我单击下一个或上一个时，缩略图不会更改

Question

它是一个图像滑块，当我单击下一个时，我还需要更改缩略图中的图像，但它不起作用。当我点击第一张图片时也没有显示主图片，第二张可以用但第三张也不能用...

缩略图不会通过下一个和上一个改变... 在滑块中，图像通过下一个和上一个改变，但缩略图不随图像改变...

代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">


  <title></title>
  <style>
    .newsslider {
      width: 100%;
      height: 800px;
      background-color:#766582;
    }

    .text {
      text-align: center;
      font-size: 40px;
      color: white;
      margin-bottom: -101px;
    }

    .btn1,
    .btn2 {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -30px;
      padding: 16px;
      color: #52492f;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    .btn2 {
      position: absolute;
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    
    .btn1:hover,
    .btn2:hover {
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
    }

    .onebtn {}

    .twobtn {}

    .thumbs {
      display: flex;
      padding-top: 6%;
      align-items: center;
      justify-content: center;
      list-style: none;
    }

    .thumbs li {
      width: 12%;
      padding: 10px;
      margin: 1%;
    }

    .thumbs li img {
      width: 100%;
    }

    .img12:hover {
      box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    }
  </style>
</head>

<body>
  <div class="newsslider">

    <p class="text" id="demo"><img id="demo1" src="img5.png" width=30%; height=400px;> </p>

    <div class="onebtn">
      <button id="btn1" class="btn1" type="button" class="prev" onclick="prev()">PREV</button>
    </div>

    <div class="twobtn">
      <button id="btn2" class="btn2" type="button" class="next" onclick="next()">NEXT</button>
    </div>

    <p id="newsArr1" class="text" style="font-size:40px; font-weight:bolder; color: #521d2c;">Hi,</p>


    <ul class="thumbs">
      <li class="img12" onclick="thumbchange(1)"><img src="img5.png" width=500%;></li>
      <li class="img12" onclick="thumbchange(2)"><img src="img2.png"></li>
      <li class="img12" onclick="thumbchange(3)"><img src="img4.png"></li>
    </ul>

  </div>




  <script>
    var newsArr = ['<img src="img5.png"width = 30%; height=400px;>',
                   '<img src="img2.png"width = 30%; height=400px; >',
                  '<img src="img4.png" width = 30%; height=400px;>'];
    var newsArr1 = ["Hi",
                    "This is Urraan", 
                    "Urraan is a digital gateway"];
    var i = 0;
    var x = document.getElementById("demo");
    var y = document.getElementById("newsArr1");

    // var timeoutId;



    function next() {
      // if (timeoutId) {
      //   clearTimeout(timeoutId);
      // }
      i++;

      if (i < newsArr.length) {
        x.innerHTML = newsArr[i];
        y.innerHTML = newsArr1[i];

      } else {
        i = 0;
        x.innerHTML = newsArr[i];
        y.innerHTML = newsArr1[i];
      }
      // timeoutId = setTimeout(next, 2000);

    }



    function prev() {
      i--;
      if (i >= 0) {
        x.innerHTML = newsArr[i];
        y.innerHTML = newsArr1[i];
      } else {
        i = newsArr.length - 1;

        x.innerHTML = newsArr[i];
        y.innerHTML = newsArr1[i];

      }

    }

    function thumbchange(num) {
      var thumb = 'img' + num + '.png';
      document.getElementById("demo1").src = thumb;
    }
  </script>

</body>



</html>

Answer 1

您的问题已解决...请尝试。

var newsArr = ['<img src="https://www.w3schools.com/bootstrap4/la.jpg"width = 100%; height=400px;>',
                   '<img src="https://www.w3schools.com/bootstrap4/chicago.jpg"width = 100%; height=400px; >',
                  '<img src="https://www.w3schools.com/bootstrap4/ny.jpg" width = 100%; height=400px;>'];
    var newsArr1 = ["Hi",
                    "This is Urraan", 
                    "Urraan is a digital gateway"];
    var i = 0;
    var x = document.getElementById("demo");
    var y = document.getElementById("newsArr1");

    // var timeoutId;



    function next() {
      // if (timeoutId) {
      //   clearTimeout(timeoutId);
      // }
      i++;

      if (i < newsArr.length) {
        x.innerHTML = newsArr[i];
        y.innerHTML = newsArr1[i];

      } else {
        i = 0;
        x.innerHTML = newsArr[i];
        y.innerHTML = newsArr1[i];
      }
      // timeoutId = setTimeout(next, 2000);
      setThumbnailFocus(i)
    }



    function prev() {
      i--;
      if (i >= 0) {
        x.innerHTML = newsArr[i];
        y.innerHTML = newsArr1[i];
      } else {
        i = newsArr.length - 1;

        x.innerHTML = newsArr[i];
        y.innerHTML = newsArr1[i];

      }
setThumbnailFocus(i)
    }

    function thumbchange(num) {
        x.innerHTML = newsArr[num-1];
        y.innerHTML = newsArr1[num-1];
        setThumbnailFocus(num-1)
    }
    function setThumbnailFocus(num){
      var elems = document.querySelectorAll(".thumbs .selected");

      [].forEach.call(elems, function(el) {
          el.classList.remove("selected");
      });
      document.getElementsByClassName("img12")[num].classList.add("selected");
    }

.newsslider {
      width: 100%;
      height: 800px;
      background-color:#766582;
    }

    .text {
      text-align: center;
      font-size: 40px;
      color: white;
      margin-bottom: -101px;
    }

    .btn1,
    .btn2 {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -30px;
      padding: 16px;
      color: #52492f;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    .btn2 {
      position: absolute;
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    
    .btn1:hover,
    .btn2:hover {
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
    }

    .onebtn {}

    .twobtn {}

    .thumbs {
      display: flex;
      padding-top: 6%;
      align-items: center;
      justify-content: center;
      list-style: none;
    }

    .thumbs li {
      width: 12%;
      padding: 10px;
      margin: 1%;
    }

    .thumbs li img {
      width: 100%;
    }

    .img12:hover {
      box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    }
    .selected{
      border:solid 2px red
    }

<div class="newsslider">

    <p class="text" id="demo"><img id="demo1" src="https://www.w3schools.com/bootstrap4/la.jpg" width=100%; height=400px;> </p>

    <div class="onebtn">
      <button id="btn1" class="btn1" type="button" class="prev" onclick="prev()">PREV</button>
    </div>

    <div class="twobtn">
      <button id="btn2" class="btn2" type="button" class="next" onclick="next()">NEXT</button>
    </div>

    <p id="newsArr1" class="text" style="font-size:40px; font-weight:bolder; color: #521d2c;">Hi,</p>


    <ul class="thumbs">
      <li class="img12 selected" onclick="thumbchange(1)"><img src="https://www.w3schools.com/bootstrap4/la.jpg" width=500%;></li>
      <li class="img12" onclick="thumbchange(2)"><img src="https://www.w3schools.com/bootstrap4/chicago.jpg"></li>
      <li class="img12" onclick="thumbchange(3)"><img src="https://www.w3schools.com/bootstrap4/ny.jpg"></li>
    </ul>

  </div>

Answer 2

我发现的第一个问题是你有这个代码：

<p class="text" id="demo"><img id="demo1" src="img5.png" width=30%; height=400px;> </p>

这里你没有使用设置 id 的部分：

var newsArr = ['<img //here is no id// src="img5.png"width = 30%; height=400px;>',
               '<img //here is no id// src="img2.png"width = 30%; height=400px; >',
              '<img //here is no id// src="img4.png" width = 30%; height=400px;>'];

当你点击下一个和上一个按钮时，你会在不知不觉中删除你的 id，所以你的 thumbchange() 函数停止工作，因为它是基于 id 的。

当我单击下一个或上一个时，缩略图不会更改

When i click the next or previous the thumbnail's are not changed

html

javascript

arrays

slider