Использование jQuery bgImageTransition для создания непрерывного fadeshow - PullRequest
Новая
       0

Использование jQuery bgImageTransition для создания непрерывного fadeshow

4 голосов
/ 10 октября 2011

Имея адское время, используя http://plugins.jquery.com/project/bgImageTransition, вы можете создать слайд-шоу с затемненными изображениями, используя URL-адреса div-фона.Причина, по которой я использую фоновые изображения, заключается в том, что для всего слайд-шоу нужны скругленные углы и вставные тени.Проблема в том, что плагин, кажется, исчезает в новом изображении, а затем возвращается к исходному.Я хочу, чтобы каждое изображение было новым, а не A, B, A, D, A, X, A, E и т. Д.

Я сделал JSFiddle: http://jsfiddle.net/dJgge/2/, а также скопировал соответствующий кодниже: 

var currImage = '007.jpg';
setInterval( function(){
    do{
        var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
    }while( randImage == currImage )
    currImage = randImage;
    jQuery('#thumbshow').BgImageTransition( 'path/'+currImage );
}, 2000)

Это в основном создает # thumbshow2 поверх #thumbshow, а затем удаляет его.Я подумал, что мне просто нужно рандомизировать фоновое изображение #thumbshow, пока # thumbshow2 находится сверху: 

var randImage2 = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
jQuery('#thumbshow').css('background',"url(path/"+randImage2+")");

Но куда бы я ни поместил это, оно создает эффект мигающего изображения.И мне также нужно убедиться, что тайно замененное фоновое изображение не совпадает с тем, которое в данный момент находится сверху.Предложения?

1 Ответ

1 голос
/ 12 октября 2011

Мне удалось заставить его работать с помощью плагина "Cycle", который идеально подходит для переходов.Посмотрите на скрипку и посмотрите, приблизит ли это вас к тому месту, где вы должны быть.Он по-прежнему использует фоновые изображения, но делает это для отдельных элементов div, которые динамически добавляются в родительский элемент слайд-шоу.

http://jsfiddle.net/H7Q33/1/

Плагин Cycle здесь ...

http://jquery.malsup.com/cycle/

...