image slide show error when put <a> tag in code

I have one image slide show. JS code is:

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

    var $sibs  = $active.siblings();

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

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

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

If I use the following code, this works perfect and shows images in sequence...

<div id="slideshow">
<?php
    $getGa=$objN->getGa();
    foreach($getGa as $getGa)
    {
        echo '<IMG src="banner/'.$getGa['开发者_JAVA技巧gall'].'">';
    }
?>
</div>

Now if I alter the code with <a> as following

<div id="slideshow">
<?php
    $getGa=$objN->getGa();
    foreach($getGa as $getGa)
    {
        echo '<a href="'.$getGa['ti'].'"><IMG src="banner/'.$getGa['gall'].'"></a>';
    }
?>
</div>

If you see I just add <a> before each image tag and this keeps on showing the same image again and again....

I think I need to change something in the JS code?

Thanks

---

It could be because your <img> will no longer have <img> siblings. Because you've wrapped each image tag in another element, it no longer has any siblings at all. Therefore you should change

var $sibs  = $active.siblings();

to

var $sibs = $active.parent().siblings().children('img');

You will also need to change $next

var $next =  $active.parent().next().find('img').length ? $active.parent().next().find('img')
        : $('#slideshow IMG:first');

---

Try changing IMG for a in your JS:

function slideSwitch() {
var $active = $('#slideshow a.active');
if ($active.length == 0 ) $active = $('#slideshow a:last');
// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow a:first');

 var $sibs  = $active.siblings();

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

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