Слайд-шоу с петлями jQuery с плавными переходами - PullRequest
Новая
       3

Слайд-шоу с петлями jQuery с плавными переходами

0 голосов
/ 29 апреля 2010

Я пытаюсь сделать простой поворот изображения на главной странице. Под капотом я читаю каталог, а затем заполняю URL для изображений в массив. То, что я хочу сделать, это пометить изображения. Если бы это было просто показом следующего, это легко, но так как мне нужно постепенно затухать, это немного сложнее. Я думаю, что я хочу сделать, это сделать затухание, вызвав animate() для значения opacity тега <img>, и между ними выгрузить свойство css background-image вмещающего <div>. Но результаты не так уж велики.

Я использовал инструменты для более полнофункциональных слайд-шоу, но мне не нужны дополнительные затраты на добавление плагина, если я могу его избежать, а простое кроссфейдирование кажется более легким.

Вот мой JavaScript (я использую jQuery 1.3.2): 

var slideshow_images = ["http:\/\/example.com\/wordpress\/wp-content\/themes\/testtheme\/sidebar-home-bg\/bg1.jpg","http:\/\/example.com\/wordpress\/wp-content\/themes\/testtheme\/sidebar-home-bg\/bg2.jpg","http:\/\/example.com\/wordpress\/wp-content\/themes\/testtheme\/sidebar-home-bg\/bg3.jpg"];
var slideshow_index = 0;
var delay = 4000;
var swapSlides = function() {
 var slideshow_count = slideshow_images.length;
 // initialize the background to be the current image
 $('#home-slideshow').css({
  'background-image': 'url(' + slideshow_images[slideshow_index] + ')',
  'background-repeat:': 'no-repeat',
  'width': 200,
  'overflow': 'hidden'
 });
 slideshow_index = ((slideshow_index + 1) == slideshow_count) ? 0 : slideshow_index + 1;
 // fade out the img
 $('#home-slideshow img').animate({opacity: 0}, delay);
 // now, the background is visible
 // next change the url on the img
 $('#home-slideshow img').attr('src', slideshow_images[slideshow_index]);
 // and fade it up
 $('#home-slideshow img').animate({opacity: 1.0}, delay);
 // do it again
 setTimeout('swapSlides()', 4000);
}


jQuery(document).ready(function(){ 
 if (swapSlides) {
  swapSlides();
 }
});

А вот разметка, которую я использую: 

<div id="home-slideshow"><img src="http://example.com/wordpress/wp-content/themes/testtheme/sidebar-home-bg/bg1.jpg" alt="" /></div>

Ответы [ 2 ]

2 голосов
/ 30 апреля 2010

попробуйте это:

ДЕМО: http://jsbin.com/ipudo/7

несколько строк jQuery 

$(function(){
    $('#home-slideshow img:gt(0)').hide();
    setInterval(function(){
      $('#home-slideshow :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('#home-slideshow');}, 
      3000);
});

2 строки CSS 

#home-slideshow { position:relative; height:332px; width:500px; }
#home-slideshow img { position:absolute; left:0; top:0; }​

ваш HTML 

   <div id="home-slideshow">
      <img src="image.jpg" alt=""/>
      <img src="image.jpg" alt=""/>
      <img src="image.jpg" alt=""/>
       ...
       ...
    </div>
2 голосов
/ 29 апреля 2010

Первое, о чем вы должны знать, и это должно вызывать проблемы с вашим кодом: методы animate не являются синхронными! Итак, когда вы делаете: 

$('#home-slideshow img').animate({opacity: 0}, delay);
 // now, the background is visible
 // next change the url on the img
 $('#home-slideshow img').attr('src', slideshow_images[slideshow_index]);

Вы начинаете анимировать, но метод сразу возвращается. Вы можете представить анимацию как фоновый поток, хотя в JavaScript нет такого понятия, как поток, и все реализовано с помощью вызовов settimeout.

Таким образом, в вашем коде, в момент изменения атрибута src, изображение, вероятно, все еще остается видимым на 99%. И затем вы начинаете анимировать его обратно до 100% непрозрачности, но в этот момент он все еще составляет, скажем, 98%, и два «потока» будут пытаться одновременно заставить его появиться / исчезнуть!

Таким образом, в вашем коде потребуется либо установить таймауты для выполнения задач в правильном порядке (всегда оставляя интервал между запасами в несколько миллисекунд), либо, более безопасный, но, возможно, менее читаемый, когда у вас много последовательных вызовов функций, используйте обратный вызов функция одушевленного метода. Например: 

$('#home-slideshow img').animate({opacity: 0}, delay, function(){
    // now, the background is visible
    // next change the url on the img
    $('#home-slideshow img').attr('src', slideshow_images[slideshow_index]);
    // and fade it up
    $('#home-slideshow img').animate({opacity: 1.0}, delay, function(){
        // do it again
        setTimeout('swapSlides()', 4000);
    });
});

Наконец, то, что вы делаете, это постепенное исчезновение + постепенное увеличение. Если вы хотите настоящее перекрестное постепенное исчезновение, вам нужно иметь одновременно 2 элемента:

  1. начало: есть только один элемент с непрозрачностью 100%
  2. создайте новый элемент с правильным URL-адресом для фонового изображения (или используйте элемент img)
  3. добавить новый элемент в dom-дерево с непрозрачностью 0%, как родственный элемент к существующему
  4. начать анимацию одновременно непрозрачности текущего элемента от 100% до 0% и непрозрачности нового элемента от 0% до 100%
  5. удалить старый, теперь невидимый элемент
...