通话相同<script> multiple times

Question

I'm new of JS,HTML and PHP, normally I program in C,C++,Java... I'm trying to do a simple page that call from a SQL with PHP some data and then display them: textual part is fine, but I don't know how to call multiple times that script for create multiple indipendents slideshows

<script>
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";
}
</script>

<?php
$connection = mysqli_connect('HOST', 'NAME', 'PASS') or die('Could not    connect:' . mysqli_error());  
mysqli_select_db($connection, 'DATABASE') or die('nulla :D'); 
$query = "SELECT marca, modello, anno, frontale, laterale, retro FROM table ORDER BY modello ASC";
$result = mysqli_query($connection, $query) or die('non stampa :D');

// conto il numero di occorrenze trovate nel db
$numrows = mysqli_num_rows($result);



  // avvio un ciclo for che si ripete per il numero di occorrenze trovate
  for ($x = 0; $x < $numrows; $x++)
  {  
    // recupero il contenuto di ogni record trovato
    $resrow = mysqli_fetch_row($result);
    $marca = $resrow[0];
    $modello = $resrow[1];
    $anno = $resrow[2];
    $frontale = $resrow[3];
    $laterale = $resrow[4];
    $retro = $resrow[5];

    // stampo a video il risultato
    echo "modello:" . $marca; 
    ?>
    <br />
    <?php
    echo "marca:" . $modello; 
    ?>
    <br />
    <?php
    echo "anno:" . $anno;
    ?>
    <br />

  <div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="<?php echo "$frontale"; ?>" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="<?php echo "$laterale"; ?>" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="<?php echo "$retro"; ?>g" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <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>




<?php
  }

// chiudo la connessione
mysqli_close($connection);
?>

Answer 1

You are pretty much setup to do that exact thing.

<script>

    slideIndex = 1; // This is "global" so you can reference it later. 
    //showSlides(slideIndex); Removed (see second script tag)

    // Function definitions are correct
    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";
    }

</script>

...

Now later on you will have access to all of the above so you can do as follows:

<script>
showSlides(slideIndex);
slideIndex = 2;
</script>

<script>
showSlides(slideIndex);
slideIndex = 3;
</script>

This just demonstrates the "global" state of your objects (functions are objects), and your variable slideIndex (Kinda like being in the main scope as it is not explicitly scoped.)

Hope this helps.