Javascript / jQuery文本幻灯片

Question

I have been trying to achieve a JavaScript/jQuery text slideshow, but I can't seem to get it to work. I have some text coming from 4 rows in my database and I want them to slide. I was able to make the text slide by storing my text in an array in my jQuery code, but that isn't what I want. I want the text to come from the database.

PHP/HTML

<div id="test">
  <?php foreach($slideshows as $slideshow): ?>
  <p id="textSlide">
    <?php echo $slideshow["testing"]; ?>
  </p>
  <?php endforeach; ?>`
</div>

JQuery

var textSlider = [
  "Lorem Ipsum is simply dummy text.",
  "Ipsum is simply dummy text.",
  "Lorem Ipsum is simply dummy text.",
  "Ipsum is simply dummy text.",
  "Lorem Ipsum is simply dummy text.",
];

var i = 0;

setInterval(function() {
  $("#textSlide").html(textSlider[i]);
  if (i == textSlider.length) {
    i = 0;
  }else {
    i++;
  }
},2000);

Answer 1

If it works with the array in JavaScript, then a simple solution is to echo the strings from PHP into the array:

var textSlider = [
  <?php 
      foreach($slideshows as $slideshow): 
         echo '"'.$slideshow["testing"].'",'; 
      endforeach; 
  ?>
];

Answer 2

You can get the content of p elements and create array with them to use in your slider code.

html/php

<div id="test">
  <?php foreach($slideshows as $slideshow): ?>
  <p class="textToSlide">
    <?php echo $slideshow["testing"]; ?>
  </p>
  <?php endforeach; ?>`
</div>

js

var sliderTexts = [];
$(".textToSlide").each(function() {
    sliderTexts.push($(this).text());
});