Using Jquery or javascript how to display the image in the sequence

In my html i am having lots of div element. I want to display the div's in a sequence. Right now i am using this code:

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);

});

This code is working perfectly. Here I am having 4 div's so i can able to change the timings manually. But what I need is, to create 50 div's like this, which i need to display in a sequence. If I use this setTimeout for that 50 div's means it will be very difficult.

Is there any way to display the div's in a sequence other than this concept. Can anyone help me in this.

Thanks in Advance.

In my html i am having lots of div element. I want to display the div's in a sequence. Right now i am using this code:

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);

});

Is there any way to display the div's in a sequence other than this concept. Can anyone help me in this.

Thanks in Advance.

Share Improve this question asked Apr 12, 2013 at 6:00 Priya Sunanthan 4391 gold badge8 silver badges18 bronze badges

some intelligent looping and setTimeout with variable decrementing timeout based on loop variable can make it work but yes,, coding this way will be tedious – AurA Commented Apr 12, 2013 at 6:03
could you right a for loop and then have an array for div's and another for time's and just loop through them? – brendosthoughts Commented Apr 12, 2013 at 6:03
Why do you even need setTimeout? Can't you just call them sequentially in the loop? You could use a naming convention to support a large set of elements with less code – TGH Commented Apr 12, 2013 at 6:04

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

One option would be to create a loop that set the timeouts:

<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>

One method for handling your timeout values could be via data-time (arbitrary name) attributes.

Possible HTML:

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

Possible script:

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

A setInterval would work.

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

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis./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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744803485a4594631.html

Using Jquery or javascript how to display the image in the sequence - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

Using Jquery or javascript how to display the image in the sequence - Stack Overflow

4 Answers 4

相关推荐