Как мне заставить этот скрипт НЕ зацикливаться? - PullRequest
0 голосов
/ 22 марта 2012

Я использую этот скрипт от Марко Койпера, и он действительно работает на удивление хорошо. Моя единственная проблема - я не хочу, чтобы это слайд-шоу зациклилось. Кто-нибудь может помочь мне понять, как заставить этот скрипт запускаться один раз? Я подозреваю, что это как-то связано с функцией setInterval, но мне достаточно только JavaScript, чтобы поиграть, и недостаточно, чтобы писать (хотя я учусь медленно). Заранее спасибо!

Ссылка на скрипт также:

http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

     /*
     * Author:      Marco Kuiper (http://www.marcofolio.net/)
     */

     // Speed of the automatic slideshow
     var slideshowSpeed = 7000;

     // Variable to store the images we need to set as background
     // which also includes some text and url's.
     var photos = [ {
    "title" : "Stairs",
    "image" : "dove.jpg",
    "url" : "http://www.sxc.hu/photo/1271909",
    "firstline" : "Imagine a Day of Peace.",
    "secondline" : "",
    "thirdline" : ""
}, {
    "title" : "Office Appartments",
    "image" : "prayer.jpg",
    "url" : "http://www.sxc.hu/photo/1265695",
    "firstline" : "",
    "secondline" : "Imagine a day where the world unites,<br><br> for one purpose",
    "thirdline" : ""
}, {
    "title" : "Mountainbiking",
    "image" : "trees.jpg",
    "url" : "http://www.sxc.hu/photo/1221065",
    "firstline" : "",
    "secondline" : "",
    "thirdline" : "To take a day, to feel what it would be like..."
}, {
    "title" : "Mountains Landscape",
    "image" : "ocean.jpg",
    "url" : "http://www.sxc.hu/photo/1271915",
    "firstline" : "...to have a world at",
    "secondline" : "",
    "thirdline" : ""
}
     ];



jQuery(document).ready(function() {

 jQuery("#headerimgs").css({"display":"none"}); 
jQuery("#headerimgs").fadeIn(2000); 

// Backwards navigation
jQuery("#back").click(function() {
    stopAnimation();
    navigate("back");
});

// Forward navigation
jQuery("#next").click(function() {
    stopAnimation();
    navigate("next");
});

var interval;
jQuery("#control").toggle(function(){
    stopAnimation();
}, function() {
    // Change the background image to "pause"
    jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });

    // Show the next image
    navigate("next");

    // Start playing the animation
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);
});


var activeContainer = 1;    
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
    // Check if no animation is running. If it is, prevent the action
    if(animating) {
        return;
    }

    // Check which current image we need to show
    if(direction == "next") {
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
        }
    } else {
        currentImg--;
        if(currentImg == 0) {
            currentImg = photos.length;
        }
    }

    // Check which container we need to use
    var currentContainer = activeContainer;
    if(activeContainer == 1) {
        activeContainer = 2;
    } else {
        activeContainer = 1;
    }

    showImage(photos[currentImg - 1], currentContainer, activeContainer);

};

var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
    animating = true;

    // Make sure the new container is always on the background
    currentZindex--;

    // Set the background image of the new active container
    jQuery("#headerimg" + activeContainer).css({
        "background-image" : "url(images/" + photoObject.image + ")",
        "display" : "block",
        "z-index" : currentZindex
    });

     // Hide the header text
    jQuery("#headertxt").css({"display" : "none"});

    // Set the new header text
    jQuery("#firstline").html(photoObject.firstline);
    jQuery("#secondline")
        .attr("href", photoObject.url)
        .html(photoObject.secondline);
    jQuery("#thirdline")
        .attr("href", photoObject.url)
        .html(photoObject.thirdline);
    jQuery("#pictureduri")
        .attr("href", photoObject.url)
        .html(photoObject.title);



    // Fade out the current container
    // and display the header text when animation is complete
    jQuery("#headerimg" + currentContainer).fadeOut(2000,function() {

        setTimeout(function() {
            jQuery("#headertxt").fadeOut({duration:1000});
            jQuery("#headertxt").fadeIn({duration:1000});
            animating = false;
        }, 300);
    });
};

var stopAnimation = function() {
    // Change the background image to "play"
    jQuery("#control").css({ "background-image" : "url(images/btn_play.png)"          });

    // Clear the interval
    clearInterval(interval);
};

// We should statically set the first image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
    navigate("next");
}, slideshowSpeed);
     });

Ответы [ 3 ]

0 голосов
/ 22 марта 2012

в функции navigate, добавьте stopAnimation()

    if(currentImg == photos.length + 1) {
        currentImg = 1;
        stopAnimation() // <~~ add this line here
    }
0 голосов
/ 22 марта 2012

Это должно работать

     /*
     * Author:      Marco Kuiper (http://www.marcofolio.net/)
     */

     // Speed of the automatic slideshow
     var slideshowSpeed = 7000;
     var count = 1;

     // Variable to store the images we need to set as background
     // which also includes some text and url's.
     var photos = [ {
    "title" : "Stairs",
    "image" : "dove.jpg",
    "url" : "http://www.sxc.hu/photo/1271909",
    "firstline" : "Imagine a Day of Peace.",
    "secondline" : "",
    "thirdline" : ""
}, {
    "title" : "Office Appartments",
    "image" : "prayer.jpg",
    "url" : "http://www.sxc.hu/photo/1265695",
    "firstline" : "",
    "secondline" : "Imagine a day where the world unites,<br><br> for one purpose",
    "thirdline" : ""
}, {
    "title" : "Mountainbiking",
    "image" : "trees.jpg",
    "url" : "http://www.sxc.hu/photo/1221065",
    "firstline" : "",
    "secondline" : "",
    "thirdline" : "To take a day, to feel what it would be like..."
}, {
    "title" : "Mountains Landscape",
    "image" : "ocean.jpg",
    "url" : "http://www.sxc.hu/photo/1271915",
    "firstline" : "...to have a world at",
    "secondline" : "",
    "thirdline" : ""
}
     ];



jQuery(document).ready(function() {

 jQuery("#headerimgs").css({"display":"none"}); 
jQuery("#headerimgs").fadeIn(2000); 

// Backwards navigation
jQuery("#back").click(function() {
    stopAnimation();
    navigate("back");
});

// Forward navigation
jQuery("#next").click(function() {
    stopAnimation();
    navigate("next");
});

var interval;
jQuery("#control").toggle(function(){
    stopAnimation();
}, function() {
    // Change the background image to "pause"
    jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });

    // Show the next image
    navigate("next");

    // Start playing the animation
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);
});


var activeContainer = 1;    
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
    // Check if no animation is running. If it is, prevent the action
    if(animating) {
        return;
    }

    // Check which current image we need to show
    if(direction == "next") {
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
        }
    } else {
        currentImg--;
        if(currentImg == 0) {
            currentImg = photos.length;
        }
    }

    // Check which container we need to use
    var currentContainer = activeContainer;
    if(activeContainer == 1) {
        activeContainer = 2;
    } else {
        activeContainer = 1;
    }

    showImage(photos[currentImg - 1], currentContainer, activeContainer);

};

var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
    animating = true;

    // Make sure the new container is always on the background
    currentZindex--;

    // Set the background image of the new active container
    jQuery("#headerimg" + activeContainer).css({
        "background-image" : "url(images/" + photoObject.image + ")",
        "display" : "block",
        "z-index" : currentZindex
    });

     // Hide the header text
    jQuery("#headertxt").css({"display" : "none"});

    // Set the new header text
    jQuery("#firstline").html(photoObject.firstline);
    jQuery("#secondline")
        .attr("href", photoObject.url)
        .html(photoObject.secondline);
    jQuery("#thirdline")
        .attr("href", photoObject.url)
        .html(photoObject.thirdline);
    jQuery("#pictureduri")
        .attr("href", photoObject.url)
        .html(photoObject.title);



    // Fade out the current container
    // and display the header text when animation is complete
    jQuery("#headerimg" + currentContainer).fadeOut(2000,function() {

        setTimeout(function() {
            jQuery("#headertxt").fadeOut({duration:1000});
            jQuery("#headertxt").fadeIn({duration:1000});
            animating = false;
        }, 300);
    });
};

var stopAnimation = function() {
    // Change the background image to "play"
    jQuery("#control").css({ "background-image" : "url(images/btn_play.png)"          });

    // Clear the interval
    clearInterval(interval);
};

// We should statically set the first image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
  if(count != photos.length){
    navigate("next");
    count++;
   }
}, slideshowSpeed);
     });
0 голосов
/ 22 марта 2012

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

var navigate = function(direction) {
    // Check if no animation is running. If it is, prevent the action
    if(animating) {
        return;
    }

    // Check which current image we need to show
    if(direction == "next") {
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
            stopAnimation();                     // add this
            return;                              // add this
        }
    } else {
        currentImg--;
        if(currentImg == 0) {
            currentImg = photos.length;
            stopAnimation();                     // add this
            return;                              // add this
        }
    }

    // Check which container we need to use
    var currentContainer = activeContainer;
    if(activeContainer == 1) {
        activeContainer = 2;
    } else {
        activeContainer = 1;
    }

    showImage(photos[currentImg - 1], currentContainer, activeContainer);

};
...