Question

我一直在尝试实现JavaScript / jQuery文本幻灯片，但我似乎无法让它工作。我有一些文本来自我的数据库中的4行，我希望它们可以滑动。我能够通过将我的文本存储在我的jQuery代码中的数组中来制作文本幻灯片，但这不是我想要的。我希望文本来自数据库。

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

如果它适用于JavaScript中的数组，那么一个简单的解决方案是将PHP中的字符串回显到数组中：

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

Answer 2

您可以获取p元素的内容并使用它们创建数组以在滑块代码中使用。

的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());
});

Javascript / jQuery文本幻灯片

2 个答案: