В настоящее время у меня есть сайт, который использует плагин цикла JQuery. Сайт использует плагин для изменения основного фонового изображения. Плагин цикла также создает раздел подкачки в HTML, который в моем случае я настроил как набор изображений.
Что я пытаюсь сделать, так это изменить изображение пейджера после активации этой конкретной «страницы». Мне удалось изменить изображение, но, поскольку на сайте используются довольно плавные переходы, я хотел бы, чтобы одно изображение плавно переходило в другое, а затем обратно.
Вы можете увидеть пример этого на данный момент здесь: http://pegaso.mammalworld.com/ от наведя курсор на изображение «галереи», вы можете увидеть, как она работает.
Это функция, которую мне нужно будет изменить, а не затухание/затухание, которое использует Jquery, в идеале это было бы простое затухание до следующего источника изображения, а затем снова затухание:
function onAfter() {
var myclass = $( ".activeSlide" ).find('img').attr('class');
//alert(myclass);
switch (myclass) {
case "image-1":
$(".image-1").attr("src","/images/image_small_01_off.jpg");
$('.image-2').fadeTo('fast', 0.5, function() {
$(this).attr("src","/images/image_small_02.jpg").fadeTo("slow", 1);
});
break;
case "image-2":
$(".image-2").attr("src","/images/image_small_02_off.jpg");
$('.image-3').fadeTo('slow', 1, function() {
$(this).attr("src","/images/image_small_03.jpg").fadeTo("slow", 1);
});
break;
case "image-3":
$(".image-3").attr("src","/images/image_small_03_off.jpg");
$('.image-4').fadeTo('slow', 1, function() {
$(this).attr("src","/images/image_small_04.jpg").fadeTo("slow", 1);
});
break;
case "image-4":
$(".image-4").attr("src","/images/image_small_04_off.jpg");
$('.image-5').fadeTo('slow', 1, function() {
$(this).attr("src","/images/image_small_05.jpg").fadeTo("slow", 1);
});
break;
case "image-5":
$(".image-5").attr("src","/images/image_small_05_off.jpg");
$('.image-6').fadeTo('slow', 1, function() {
$(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
});
break;
case "image-6":
$(".image-5").attr("src","/images/image_small_05_off.jpg");
$('.image-6').fadeTo('slow',1, function() {
$(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
});
break;
default :
$(".image-1").attr("src","/images/image_small_01_off.jpg");
$(".image-2").attr("src","/images/image_small_02_off.jpg");
$(".image-3").attr("src","/images/image_small_03_off.jpg");
$(".image-4").attr("src","/images/image_small_04_off.jpg");
$(".image-5").attr("src","/images/image_small_05_off.jpg");
$(".image-6").attr("src","/images/image_small_06_off.jpg");
break;
}
}
ОБНОВЛЕНИЕ
Чтобы увидеть эффект на сайте, просто наведите указатель мыши на галерею и посмотрите, как меняется фоновое изображение, таким образом меняя изображение пейджера повсюду. Затухание должно быть таким же плавным, как и для фонового изображения...
Помогите, пожалуйста! :)
