image rotator with fade

[lional]

Hi

I am trying to create an image rotator for two images in javescript.

I have this script but now I would like to have the images fade into one another.

<script type="text/javascript">
  var ImageArr1 = new Array("hansgroup3.jpg","hansgroup6.jpg","hansgroup1.jpg", "hansgroup4.jpg", "hansgroup5.jpg", "hansgroup2.jpg");
  var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("hansgrouptwo1.jpg","hansgrouptwo2.jpg","hansgrouptwo3.jpg", "hansgrouptwo4.jpg", "hansgrouptwo5.jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  </script>

Any help will be appreciated

 

Thanks

 

Lional

[Christian F.]

I'd recommend looking into a library like jQuery for this one. It has an extensive library of transition functions, and makes it really easy to add them to your site.

[lional]

Thanks that bhelped.

I need to have two images rotating on the same page.

I made some variable changes and created a second function.

I am very new to javascript and jquery.

The left image works perceftly, but the rught one remains static.

Here is my css

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}
#slideshow1 {
    position:relative;
    height:350px;
}

#slideshow1 IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow1 IMG.active {
    z-index:10;
}

#slideshow1 IMG.last-active {
    z-index:9;
}

my javascript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 6000 );
});

function slideSwitch1() {
    var $active1 = $('#slideshow1 IMG.active');

    if ( $active1.length == 0 ) $active1 = $('#slideshow1 IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next1 =  $active1.next1().length ? $active1.next1()
        : $('#slideshow1 IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active1.addClass('last-active1');

    $next1.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active1.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch1()", 6000 );
});

and my html

<div id="slideshow">
    <img src="hanzgroupss1/img/hansgroup3.jpg" alt="" class="active" />
    <img src="hanzgroupss1/img/hansgroup6.jpg" alt="" />
    <img src="hanzgroupss1/img/hansgroup1.jpg" alt="" />
    <img src="hanzgroupss1/img/hansgroup4.jpg" alt="" />
    <img src="hanzgroupss1/img/hansgroup5.jpg" alt="" />
    <img src="hanzgroupss1/img/hansgroup2.jpg" alt="" />
    </div>
<div id="slideshow1">
    <img src="hanzgroupss2/img/hansgrouptwo1.jpg" alt="" class="active1" />
    <img src="hanzgroupss2/img/hansgrouptwo2.jpg" alt="" />
    <img src="hanzgroupss2/img/hansgrouptwo3.jpg" alt="" />
    <img src="hanzgroupss2/img/hansgrouptwo4.jpg" alt="" />
    <img src="hanzgroupss2/img/hansgrouptwo5.jpg" alt="" />
    </div>

 

Thanks

 

Lional

[lional]

Thanks, Problem solved

[Christian F.]

You're welcome, glad I could be of help.

Remember to mark your thread as "Solved" ↓←