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>个兄弟姐妹。因为您已将每个图像标记包装在另一个元素中，所以它根本不再有任何兄弟姐妹。因此你应该改变

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

Answer 2

尝试在JS中更改IMG：

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

放置<a> tag in code</a>时图片幻灯片显示错误

2 个答案: