2013-11-18 3 views
0

Пожалуйста, смотрите эту скрипку http://jsfiddle.net/rabelais/ayaK2/Увядание изображений в слайд-шоу?

  1. Вот слайд-шоу из фотографий и видео.

  2. Все изображения и видеоролики - полный экран.

  3. Когда пользователь нажимает на каждое изображение/видео, он отображает следующий.

МОЙ ВОПРОС: Как заставить изображения в этом слайд-шоу исчезать?

$(function() { 

var win = $(window), 
    fullscreen = $('.full'), 
    image = fullscreen.find('img, video'), 
    imageWidth = image.width(), 
    imageHeight = image.height(), 
    imageRatio = imageWidth/imageHeight, 
    currentSlide = 0, 
    numSlides = $('.full').length; 

function resizeImage() { 
    var winWidth = win.width(), 
     winHeight = win.height(), 
     winRatio = winWidth/winHeight; 

    if (winRatio > imageRatio) { 
     image.css({ 
      width: winWidth, 
      height: Math.round(winWidth/imageRatio) 
     }); 
    } else { 
     image.css({ 
      width: Math.round(winHeight * imageRatio), 
      height: winHeight 
     }); 
    } 
} 

function advanceToSlide(slidePos){ 
    slide = $('.full').eq(slidePos); 
    slide.show(); 
    var video = $('video', slide); 

    $('video').each(function(){ 
     $(this).get(0).pause(); 
    }) 

    if(video.length){ 
     console.log(video.get(0).play()); 
    } 
} 

$('.full').on('click', function(){ 
    $('.full').hide(); 
    if(currentSlide < numSlides - 1){ 
     currentSlide = currentSlide + 1; 
    } else{ 
     currentSlide = 0; 
    } 
    advanceToSlide(currentSlide); 
}); 

$('.full:gt(0)').hide(); 
resizeImage(); 

}); 

ответ

Смежные вопросы