How can I create an image "change" effect in JQuery? [closed]

Question 1

Okay, so like any programming task you want to break something like this down into simple steps. In this case, maybe something like this:

When the page loads, only show the first image. To do this, you should have a display:none CSS rule on all of the images EXCEPT for the first one. This can easily be accomplished by created a class called hide and applying it to the HTML. We could also manage this via JS, but that may cause bugs depending on the internet connection that your users have...
Every five seconds, fade the current image out, and fade the next one in.
If we are on the last image, make sure we go back to the first image in the list.

That's pretty much all we need to do, so let's write some code:

First, let's refactor your markup to use an id for the container and then add the CSS class to all images but the first.

<div id="img_container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="hide image_wall_thumbnail" />
     <img src="images/3.png" class="hide image_wall_thumbnail" />
     <img src="images/4.png" class="hide image_wall_thumbnail" />
     <img src="images/5.png" class="hide image_wall_thumbnail" />
     <img src="images/6.png" class="hide image_wall_thumbnail" />
</div>

Next, let's write a little CSS:

.hide {
    display:none;
}

Okay now is the "tricky" part where we write some JS:

$(function() {
  //cache dom elements and set init vars
  var $img = $('#img_container').find('img'),
      max = $img.length, //how many images you have in the container
      current = 0; //we will start the script at the first item

  //Every five seconds, run the code within the handler
  setInterval(function(){
    $($img[current]).fadeOut('fast', function(){
      determineIndex(); //Update the index of the image in the img array
      $($img[current]).fadeIn();
    });
  }, 5000);

  function determineIndex () {
    current = (current === max - 1) ? 0 : (current + 1);
  }
});

Now here's the demo! http://jsfiddle.net/T2nzh/

Comment if you have any questions about how the javascript works. :)

EDIT: Okay, so if you want to just randomly swap out image sources, check this out. The html you want:

<div id="img_container">
     <img src="images/1.png" style="background:red" class="image_wall_thumbnail" />
     <img src="images/2.png" style="background:silver" class="image_wall_thumbnail" />
     <img src="images/3.png" style="background:purple" class="image_wall_thumbnail" />
     <img src="images/4.png" style="background:yellow" class="image_wall_thumbnail" />
     <img src="images/5.png" style="background:green" class="image_wall_thumbnail" />
     <img src="images/6.png" style="background:blue" class="image_wall_thumbnail" />
</div>

<div id="img_spares" style="display:none;">
     <img src="images/7.png" style="background:magenta" class="image_wall_thumbnail" />
    <img src="images/8.png" style="background:brown" class="image_wall_thumbnail" />
</div>

And the JS:

$(function() {
  //cache dom elements and set init vars
  var $img = $('#img_container'),
      $spares = $('#img_spares'),
      max = $img.find('img').length,
      spares_max = $spares.find('img').length;

  //Every five seconds, run the code within the handler
  setInterval(function(){
    $($img.find('img')[randomIndex(0,max)]).fadeOut('fast', function(){
      var $el = $(this),
          el_source = $el.attr('style'),
          $swap = $($spares.find('img')[randomIndex(0,spares_max)]),
          swap_source = $swap.attr('style');

      $el.attr('style', swap_source).fadeIn();
      $swap.attr('style', el_source);
    });
  }, 1000);

  function randomIndex (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
});

And the demo: http://jsfiddle.net/T2nzh/3/

Question 2

take a look:

<div class="container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="image_wall_thumbnail" />
     <img src="images/3.png" class="image_wall_thumbnail" />
     <img src="images/4.png" class="image_wall_thumbnail" />
     <img src="images/5.png" class="image_wall_thumbnail" />
     <img src="images/6.png" class="image_wall_thumbnail" />
</div>

then the jQuery:

var slide = 1;

function slideshow() {
    $("#container").find("img").animate({opacity:0});
    setTimeout('$("#container").find("img").hide();',400);
    setTimeout('$("#container").find("[src='images/"+slide+".png']").show();',400);
    setTimeout('$("#container").find("[src='images/"+slide+".png']").animate({opacity:1});',400);
    slide++;
}

var slideshow = setInterval("slideshow();",3000);

also, set the opacity to 0 and display to none for all the images. This code has not beenj tested so you might have to make some minor adjustments.