php - 在代码中放置 标记时图像幻灯片显示错误

Question

我有一张图像幻灯片。 JS代码为:

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

如果我使用以下代码，则效果完美并按顺序显示图像...

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

现在，如果我用 <a> 更改代码如下

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

如果你看到我就添加<a>在每个图像标签之前和这会不断地一次又一次地显示相同的图像......

我想我需要更改 JS 代码中的某些内容？

谢谢

Answer 1

这可能是因为你的<img>将不再有<img> sibling 。因为您已将每个图像标签包装在另一个元素中，所以它根本不再有任何同级元素。因此你应该改变

var $sibs  = $active.siblings();

至

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

您还需要更改$next

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