Question

我正在尝试创建一个图片库，但我在导航方面遇到了一些问题。问题如下：每当图片以淡出结束时，小按钮会改变其颜色，但是我希望我的小按钮在当前图像开始淡出时立即改变，而不是在它完成淡出时。

HTML：

<div id="portfolio_cycler">

    <img class="active" src="images/pic1.jpg" alt="picture 1"  /> 
    <img src="images/pic2.jpg" alt="picture 2" />
    <img src="images/pic3.jpg" alt="picture 3" />
    <img src="images/pic4.jpg" alt="picture 4" />
    <img src="images/pic5.jpg" alt="picture 5" /> 

</div>

CSS：

#portfolio_cycler{
position:relative;
left: 55px;
top: 50px;
}
#portfolio_cycler img{
position:absolute;z-index:1
}
#portfolio_cycler img.active{
z-index:3
}
#buttons{
position:absolute;
top: 490px;
left: 55px;
}

jQuery的：

function cycleImages(){

  var $active = $('#portfolio_cycler .active');



  var $next = ($('#portfolio_cycler .active').next().length > 0) ? $('#portfolio_cycler .active').next() : $('#portfolio_cycler img:first');
  activ=$active.index(); // INDEX TRENUTNO AKTIVNOG ELEMENTA

  $next.css('z-index',2);//move the next image up the pile
   $("#buttons img").eq(activ).attr('src','images/button_active.png');
  $active.fadeOut(1500,function(){//fade out the top image 
  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image

  $next.css('z-index',3).delay(4000).addClass('active');//make the next image the top one
  cycleImages()
  });
}

$(document).ready(function(){
pic_number=$("#portfolio_cycler img").length;
for (i=0;i<pic_number;i++)
{
    $("#buttons").append("<a href='javascript:void(0)'><img src='images/button.png' /></a>");
}
// run every 7s
setTimeout('cycleImages()', 4000);

});

由于我的问题可能让某些人感到困惑，我想达到类似的效果：http://static.dreamcss.com/wp-content/uploads/example/ 您注意到当前图像开始滑动之前活动按钮的变化情况如何？我想在这里用我的按钮实现同样的目的。

Answer 1

您所做的就是“激活”按钮以显示淡出的图像。我相信你想激活下一个要显示的图像的按钮？而不是以下代码：

activ=$active.index();
...
$("#buttons img").eq(activ).attr('src','images/button_active.png');

你可以使用这段代码[请注意，你应该将'activ'声明为变量，你真的不希望它是全局的]：

var next_active = $next.index();   //$active is changed to $next
...
$("#buttons img")
    .eq(next_active)
    .attr('src','images/button_active.png');

我不是100％确定你的目标，但你可能还想将非活动按钮重置为原始图像，在这种情况下，你可以使用：

$("#buttons img")
    .attr('src','images/button.png')
    .eq(next_active)
    .attr('src','images/button_active.png');

编辑：好的，你的主要问题在于你使用了delay（）函数。这只会在链中产生延迟，但下一行的代码将立即执行。在这里使用setTimeout（）而不是delay（），因为你想延迟下一次调用cycleImages（）的执行。

您还必须进行我上面提到的更改，否则刚刚淡出的图像按钮将处于活动状态。总而言之，以下jQuery代码应该适用于您的cycleImages函数：

function cycleImages(){

    var $active = $('#portfolio_cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#portfolio_cycler img:first');
    // Note the use of $active instead of using selectors again

    var next_active = $next.index();
    $next.css('z-index',2);
    $("#buttons img").eq(next_active).attr('src','images/button_active.png');

    $active.fadeOut(1500, function() {
        $active.css('z-index',1).show().removeClass('active');
        $next.addClass('active');
        /* You can add the class active to $next immediately here.
           The delay is instead needed before the function call below, hence
           setTimeout is used. Also since you have set the z-index of an active
           image to 3 in your css, setting it in the javascript is redundant */

        setTimeout(cycleImages, 4000);
    });
}

图像库，FadeOut和jQuery中的导航

1 个答案: