Question

下面的代码分组显示来自数据库的图像，每组包含3张图片。当我手动循环时，一切都很好用，但这不是我想要的。我需要有关如何使用javascript遍历所有组的帮助时间间隔。下面是我的javascript代码

<script>
    showSli();
function showSli() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) 
  {
      slides[i].style.display = "none";
  }
}
    show();
function show()
    {
        var col=0;
        var slides = document.getElementsByClassName("mySlides");
        lent=slides.length;
        var total=Math.ceil(lent/3);  
        col++;
        if (col >total) {col = 1}
        var row;
        for(row=3*col-2; row<=3*col; row++)
        {
                  slides[row-1].style.display = "block";
        }
        //setTimeout(show,2000);
    }
    //setInterval(show, 1000);
</script>

Answer 1

我能够解决问题。在我的show函数中设置的计数器变量意味着在外面。下面是工作代码。我还写了一个jquery版本的每行代码虽然有块评论.Below是工作代码

 <?php
    $query1="select * from picture where category='VIP'";
    $result1=mysql_query($query1);
    while($rec=mysql_fetch_array($result1))
    {
    echo "<div  class=\"lef\">";
    echo "  <a href=\"chat2.php?user={$rec['username']}\"><img  class=\"img-
              responsive mySlides\" src=\"img/{$rec['img']}\"/></a>";
    echo "</div>";              
    }
 ?>

    <script>
        var col=0;
        showSli();
    function showSli() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      for (i = 0; i < slides.length; i++) 
      {
          slides[i].style.display = "none";
      }
     /** var slides = $(".mySlides");
    for(var i=0; i<slides.length; i++)
        {
        var element = slides.eq(i);
        element.hide();
        }
        */



            lent=slides.length;
            var total=Math.ceil(lent/3);  
            col++;
            if (col >total) {col = 1}
            var row;
            for(row=3*col-2; row<=3*col; row++)
            {
                    slides[row-1].style.display = "block";
                    //var element2 = slides.eq(row-1);
                    //element2.fadeIn(3000);
            }
            setTimeout(showSli,5000);
        }

    </script>

以给定间隔

1 个答案: