Галерея изображений, FadeOut и навигация в jQuery - PullRequest
Новая
       31

Галерея изображений, FadeOut и навигация в jQuery

0 голосов
/ 11 ноября 2011

Я пытаюсь создать галерею изображений, но у меня небольшая проблема с навигацией. Проблема заключается в следующем: Всякий раз, когда изображение заканчивается с исчезновением, маленькая кнопка меняет свой цвет, но я хочу, чтобы моя маленькая кнопка меняла себя, как только текущее изображение начинает исчезать, а не когда оно заканчивает исчезать.

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/ Вы замечаете, как активная кнопка изменяется непосредственно перед тем, как текущее изображение начинает скользить? Я хочу добиться того же с моими кнопками здесь.

1 Ответ

2 голосов
/ 11 ноября 2011

То, что вы сделали, это «активировали» кнопку для изображения, которое будет исчезать. Я полагаю, вы хотите активировать кнопку для изображения, которое будет показано дальше? Вместо следующего кода: 

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

EDIT: Хорошо, ваша основная проблема заключается в использовании функции 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);
    });
}
...