Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts

    cycle through array to hide/show

    I've got a simple script, but I'm not sure if I'm understanding the second part of this correctly. Well, obviously, I don't... because it's not working. Maybe because I'm not used to working with arrays.

    The images are rotating through, just fine. But the #slidertext blocks are not cycling through with display:none/block like I want.

    Code:
    <style>
    #slidertext1 {display:block;}
    #slidertext2 {display:none;}
    #slidertext3 {display:none;}
    </style>
    
    <div id="slidertext1">Content 1</div>
    <div id="slidertext2">Content 2</div>
    <div id="slidertext3">Content 3</div>
    
    <script type="text/javascript">// <![CDATA[
    {literal}
    $(document).ready(function() {
    
    var slidetext1 = '1';
    var slidetext2 = '2';
    var slidetext3 = '3';
    
    var newBg = ['slide1.jpg', 'slide2.jpg','slide3.jpg'];
    var newContent = [slidetext1,slidetext2,slidetext3];
    var path="uploads/images/slides-main/";
    var i = 0;
    var i2 = 0;
    var rotateBg = setInterval(function(){
        $('#sliderbg').css('backgroundImage' ,  "url('" +path+newBg[i]+ "')");
        if(i==2)
         i=0;
         else
          i++;
    }, 4400);
    
    var rotateBg = setInterval(function(){
     $('#slidertext[i2]').css("display","block");
    $('#slidertext[i2 - 1]').css("display","none");
        if(i2==2)
         i2=0;
         else
          i2++;
    }, 4400);
    
    });
    {/literal}
    // ]]></script>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts
    actually, I think I managed with something like this:

    Code:
    var divs = $('div[id^="slidertext"]').hide(),
        i2 = 0;
    
    (function cycle() { 
        divs.eq(i2).fadeIn(400)
                  .delay(3600)
                  .fadeOut(400, cycle);
    
        i2 = ++i2 % divs.length; 
                           
    })();
    
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •