Question

在我的HTML中，我有很多div元素。我想按顺序显示div。现在我正在使用这段代码：

HTML：

<div id="text">
    <img src="images/text.png" />
</div>
<div id="tv" style="display:none;">
    <img src="images/tv.png" />
</div>
<div id="mobile" style="display:none;">
    <img src="images/mcu.png" />
</div>
<div id="remote" style="display:none;">
    <img src="images/rcu.png" />
</div>

javascipt的：

$(document).ready(function () {
    setTimeout(function () {
        $("#tv").show();
    }, 3000);
    setTimeout(function () {
        $("#mobile").fadeIn(500);
    }, 4500);
    setTimeout(function () {

        $("#remote").show();
    }, 5500);

});

此代码运行正常。这里我有4个div，所以我可以手动更改时间。但我需要的是，创建50个这样的div，我需要按顺序显示。如果我将这个setTimeout用于那50个div意味着它将非常困难。

有没有办法以除此概念之外的顺序显示div。任何人都可以帮助我。

先谢谢。

Answer 1

一种选择是创建一个设置超时的循环：

<div id="text" class="fadein">
    <img src="images/text.png" />
</div>
<div id="tv" class="fadein" style="display:none;">
    <img src="images/tv.png" />
</div>
<div id="mobile" class="fadein" style="display:none;">
    <img src="images/mcu.png" />
</div>
<div id="remote" class="fadein" style="display:none;">
    <img src="images/rcu.png" />
</div>

<script type="text/javascript">
    $('.fadein').each(function(index, elem) {
        setTimeout(function () {
            $(elem).fadeIn(500);
        }, index * 500);
    });
</script>

Answer 2

处理超时值的一种方法可以是data-time（任意名称）属性。

可能的HTML：

<div id="images">
  <div id="text" data-time="500">
      <img src="http://dummyimage.com/600x400/000/fff" />
  </div>
  <div id="tv" data-time="1000" style="display:none;">
      <img src="http://dummyimage.com/600x400/000/aaa" />
  </div>
  <div id="mobile" data-time="250" style="display:none;">
      <img src="http://dummyimage.com/600x400/000/333" />
  </div>
  <div id="remote" data-time="750" style="display:none;">
      <img src="http://dummyimage.com/600x400/000/111" />
  </div>
</div>

可能的脚本：

$('#images').children().each(function(index, elem) {
  setTimeout(function () {
    $(elem).fadeIn($(this).attr('data-time'));
  }, $(this).attr('data-time'));
});

Answer 3

setInterval可以工作。

<div id="tv" class="ImageContainer" style="display:none;">
    <img src="images/tv.png" />
</div>
<div id="mobile" class="ImageContainer" style="display:none;">
    <img src="images/mcu.png" />
</div>
<div id="remote" class="ImageContainer" style="display:none;">
    <img src="images/rcu.png" />
</div>

$(document).ready(function () {
    var arrImageContainer = $(".ImageContainer");
    var nIndex = 0;
    var iInterval = setInterval(function () {
        if(nIndex == arrImageContainer.length)
        {
            clearInterval(iInterval);
        }
        $(arrImageContainer[nIndex]).fadeIn(500);
        nIndex++;
    }, 1500);
});

Answer 4

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"</script>
        <script>
            var a=1;
            function slide1(){
                setInterval(function(){
                    $(".slide").css("display","none");
                    $("#d"+a).fadeIn(500);
                    a=a+1;
                    if(a==51)
                        a=1;
                },1000);
            }
        </script>
    </head>
    <body >
        <div style="display:none" class="slide" id="d1">1</div>
        <div style="display:none" class="slide" id="d2">2</div>
        <div style="display:none" class="slide" id="d3">3</div>
        <div style="display:none" class="slide"  id="d4">4</div>
        <div style="display:none" class="slide"  id="d5">5</div>
        <div style="display:none" class="slide"  id="d6">6</div>
        <div style="display:none" class="slide"  id="d7">7</div>
        <div style="display:none" class="slide"  id="d8">8</div>
        <div style="display:none" class="slide"  id="d9">9</div>
        <div style="display:none" class="slide"  id="d10">10</div>

        <div style="display:none" class="slide"  id="d11">11</div>
        <div style="display:none" class="slide"  id="d12">12</div>
        <div style="display:none" class="slide"  id="d13">13</div>
        <div style="display:none" class="slide"  id="d14">14</div>
        <div style="display:none" class="slide"  id="d15">15</div>
        <div style="display:none" class="slide"  id="d16">16</div>
        <div style="display:none" class="slide"  id="d17">17</div>
        <div style="display:none" class="slide"  id="d18">18</div>
        <div style="display:none" class="slide"  id="d19">19</div>
        <div style="display:none" class="slide"  id="d20">20</div>

        <div style="display:none" class="slide"  id="d21">21</div>
        <div style="display:none" class="slide"  id="d22">22</div>
        <div style="display:none" class="slide"  id="d23">23</div>
        <div style="display:none" class="slide"  id="d24">24</div>
        <div style="display:none" class="slide"  id="d25">25</div>
        <div style="display:none" class="slide"  id="d26">26</div>
        <div style="display:none" class="slide"  id="d27">27</div>
        <div style="display:none" class="slide"  id="d28">28</div>
        <div style="display:none" class="slide"  id="d29">29</div>
        <div style="display:none" class="slide"  id="d30">30</div>

        <div style="display:none" class="slide"  id="d31">31</div>
        <div style="display:none" class="slide"  id="d32">32</div>
        <div style="display:none" class="slide"  id="d33">33</div>
        <div style="display:none" class="slide"  id="d34">34</div>
        <div style="display:none" class="slide"  id="d35">35</div>
        <div style="display:none" class="slide"  id="d36">36</div>
        <div style="display:none" class="slide"  id="d37">37</div>
        <div style="display:none" class="slide"  id="d38">38</div>
        <div style="display:none" class="slide"  id="d39">39</div>
        <div style="display:none" class="slide"  id="d40">40</div>

        <div style="display:none" class="slide"  id="d41">41</div>
        <div style="display:none" class="slide"  id="d42">42</div>
        <div style="display:none" class="slide"  id="d43">43</div>
        <div style="display:none" class="slide"  id="d44">44</div>
        <div style="display:none" class="slide"  id="d45">45</div>
        <div style="display:none" class="slide"  id="d46">46</div>
        <div style="display:none" class="slide"  id="d47">47</div>
        <div style="display:none" class="slide"  id="d48">48</div>
        <div style="display:none" class="slide"  id="d49">49</div>
        <div style="display:none" class="slide"  id="d50">50</div>

        <input type="button" onclick="slide1()" value="click me">
    </body>
</html>

使用Jquery或javascript如何在序列中显示图像

4 个答案: