jQuery: бесконечный цикл анимации - для слайд-шоу фотографий - PullRequest
Новая
       10

jQuery: бесконечный цикл анимации - для слайд-шоу фотографий

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

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

Я пробовал с помощью for ()функция, http://jsfiddle.net/2TPTX/, и также без нее, http://jsfiddle.net/2TPTX/1/. Но я все еще не могу заставить его работать должным образом.

Можете ли вы, ребята, ПОЖАЛУЙСТА, помочь мне?

Код, указанный в скрипте, который я предоставил (http://jsfiddle.net/2TPTX/ или http://jsfiddle.net/2TPTX/, но для вашего удобства я также включил его здесь.

HTML: 

<div id="slideshow">
    <a id="slideshow_lnk" href="www.mysite.com/some_link_1.html">
    <div id="slideshow_img"></div>
    </a>
</div>

CSS: 

#slideshow {
    width: 50px;
    height: 50px;
}
#slideshow_img {
    background-repeat:no-repeat;
    background-size:100% 100%;

    width: 50px;
    height: 50px;
    }

jQuery: 

var $slide = $("#slideshow_img");
var $link = $("#slideshow_lnk");

//$photos Array
var $photos = [['photo', 'link']]; //[0] = Header
$photos[1] = ['http://img510.imageshack.us/img510/2497/54208035.jpg', 'http://www.stackoverflow.com/'];
$photos[2] = ['http://img265.imageshack.us/img265/3355/62320763.jpg', 'http://www.google.com/'];
$photos[3] = ['http://img411.imageshack.us/img411/1237/75707805.jpg', 'http://www.yahoo.com/'];

//Loop variables
$photos.count = $photos.length - 1;
var $fade_time = 3500;
var $i = 1;

function slideshow() {
    $i = ($i > $photos.count ? 1 : $i++);
    $photos.css_url = "url('" + $photos[$i][0] + "')";
    $link.attr("href", $photos[$i][1]);

    $slide.fadeOut($fade_time);
    $slide.css("background-image", $photos.css_url);
    $slide.fadeIn($fade_time);
}

slideshow();

Ответы [ 2 ]

1 голос
/ 17 ноября 2011

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

Вот скрипка , дайте мне знать, если у вас есть какие-либо вопросы. 

function slideshow($slide, $link, fade_time, images){
    var i = 0;
    function step(next){
        if (i === images.length) {
            i = 0;
        }
        $slide
            .fadeOut(fade_time)
            .queue(function(nextSlide){ return function(next){
                $slide.css("background-image", "url('" + nextSlide.image + "')");
                $link.attr("href", nextSlide.link);
                next();
            }; }(images[i]))
            .fadeIn(fade_time)
            .queue(step);
        i++;
        next();
    }
    $slide.queue(step);
}

var photos = [
    { image: "http://img510.imageshack.us/img510/2497/54208035.jpg", link: "http://www.stackoverflow.com/" },
    { image: "http://img265.imageshack.us/img265/3355/62320763.jpg", link: "http://www.google.com/" },
    { image: "http://img411.imageshack.us/img411/1237/75707805.jpg", link: "http://www.yahoo.com/" }
];

slideshow($("#slideshow_img"), $("#slideshow_lnk"), 3500, photos);
1 голос
/ 17 ноября 2011

Вот JS Fiddle, которая выполняет большую часть того, что вы хотите, у вас все еще, вероятно, есть небольшая настройка, чтобы делать именно то, что вы хотите, но это выполняет "бесконечный цикл", как описано: http://jsfiddle.net/tGLMF/4/

К вашему сведению - в этом скрипте я также обновил ваши функции fadein и fadeout, прежде чем вы установили: 

$slide.fadeOut($fade_time);
$slide.css("background-image", $photos.css_url);
$slide.fadeIn($fade_time);
$timeout = setTimeout(function(){slideshow(slideNumber+1);}, ( $fade_time * 2) + 1000 );

Я обновил это так: 

$slide.fadeOut($fade_time, function(){
    $slide.css("background-image", $photos.css_url);
    $slide.fadeIn($fade_time);
    $timeout = setTimeout(function(){slideshow(slideNumber+1);}, ( $fade_time * 2) + 1000 );
});

Причина, по которой я это сделал, заключается в том, чтопотому что анимации происходят асинхронно, поэтому вы вызывали fadeOut, но пока он исчезал, вы вызывали fadeIn, что вызвало некоторую странность - это то, что отображалось, и когда

Изменить, чтобы показать начало с изображения 1 Новая скрипка - http://jsfiddle.net/tGLMF/5/

...