Question

我想在进入我的网页时立即显示text和image。现在我的图像立即显示，但是当我打开我的网页时，文本会在2秒后出现。这是我的代码：

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}

var text = ["<?php
    $conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
    $sql2 = "SELECT * FROM product";
    $result2 = $conn->query($sql2);
    while($row = $result2->fetch_assoc()) {
        $code3 = $row["mtitle"];
        echo $code3.'","';
    }
?>"];
var counter = 0;
var elem = document.getElementById("changeText");


function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
  }
}
change(); setInterval(change, 2000);
</script>

Answer 1

在您最近更新问题中的代码之后，事情应该已经有所改进。

但是你应该将这两个区间合并在一起，因为你想让这两个动作（图像和文本）同时发生，而不存在它们不同步的风险。

其次，定义text数组的方式不是最佳实践。想象一下，如果你的一个文本包含双引号，那么事情就会出错...而是使用JSON。

最后，使用更好地表明它们的内容的变量名称。 x 表示x坐标，而不是DOM元素列表。将其命名为slides或其他内容。对于数组的事物的复数也给出了线索：text不是代码中的一个文本，而是一个文本数组，因此将其称为复数texts。所有这些都有助于使您的代码更具可读性。

// Use JSON notation instead of fabricating the array with concatenations
var texts = <?php
    $conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
    $sql2 = "SELECT * FROM product";
    $result2 = $conn->query($sql2);

    while($row = $result2->fetch_assoc()) {
        $data = $row["mtitle"]; // Push to an array
    }
    echo json_encode($data); // Encode the array as JSON text: ["abc", "def", ...]
?>;

var slides = document.getElementsByClassName("slides");

(function carousel(slideIndex, textIndex) {
    var i;
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slides[slideIndex].style.display = "block";
    // The variable changeText is automatically defined upon page load, so use it  
    changeText.textContent = texts[textIndex]; 
    // Change image and text every 2 seconds
    setTimeout(carousel.bind(null, (slideIndex + 1) % slides.length, 
                                   (textIndex + 1) % texts.length)), 2000);
})(0, 0); // Execute on page load, keeping the counters as local variables

setInterval文本javascript

1 个答案: