Es ist ein Bildschieberegler, wenn ich auf das nächste klicke. Ich muss das Bild auch in den Miniaturansichten ändern, aber es funktioniert nicht. zeigt auch nicht das Hauptbild, wenn ich auf das erste Bild klicke und das zweite funktioniert, aber das dritte funktioniert auch nicht ...

Miniaturansichten werden nicht durch das nächste und vorherige geändert ... in Schiebereglern werden Bilder durch das nächste und vorherige geändert, aber die Miniaturbilder ändern sich nicht mit dem Bild ...

Code.

<!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>
0
Muhammad Ihtesham 6 Okt. 2020 im 08:02

2 Antworten

Beste Antwort

Ihr Problem gelöst ... bitte versuchen Sie es.

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>
0
Mehrzad Tejareh 6 Okt. 2020 im 05:54

Das erste Problem, das ich gefunden habe, ist, dass Sie diesen Code haben:

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

Und hier haben Sie keinen Teil mit der Einstellungs-ID verwendet:

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;>'];

Wenn Sie auf die Schaltfläche "Weiter" und "Zurück" klicken, wird Ihre ID unbewusst entfernt, sodass Ihre Funktion "thumbchange ()" nicht mehr funktioniert, da sie auf der ID basiert.

0
Kida 6 Okt. 2020 im 05:23