0

我有一个用于淡入淡出背景图像的简单 JS 脚本。该脚本适用于 jquery 1.4 分钟，但现在我正在运行 1.7.2，它在哪里中断。

乍一看，有什么想法可能会在下面的脚本中从旧版本更改为新版本？

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

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
    "title" : "Stairs",
    "image" : "vacation.jpg",
    "url" : "http://www.sxc.hu/photo/1271909",
    "firstline" : "Going on",
    "secondline" : "vacation?"
}, {
    "title" : "Office Appartments",
    "image" : "work.jpg",
    "url" : "http://www.sxc.hu/photo/1265695",
    "firstline" : "Or still busy at",
    "secondline" : "work?"
}, {
    "title" : "Mountainbiking",
    "image" : "biking.jpg",
    "url" : "http://www.sxc.hu/photo/1221065",
    "firstline" : "Get out and be",
    "secondline" : "active"
}, {
    "title" : "Mountains Landscape",
    "image" : "nature.jpg",
    "url" : "http://www.sxc.hu/photo/1271915",
    "firstline" : "Take a fresh breath of",
    "secondline" : "nature"
}, {
    "title" : "Italian pizza",
    "image" : "food.jpg",
    "url" : "http://www.sxc.hu/photo/1042413",
    "firstline" : "Enjoy some delicious",
    "secondline" : "food"
}
];



$(document).ready(function() {

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

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

var interval;
$("#control").toggle(function(){
    stopAnimation();
}, function() {
    // Change the background image to "pause"
    $(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 = Math.floor((Math.random()*5));
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[Math.floor(Math.random()*photos.length)], 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
    $("#headerimg" + activeContainer).css({
        "background-image" : "url(images/" + photoObject.image + ")",
        "display" : "block",
        "z-index" : currentZindex
    });

    // Fade out the current container
    // and display the header text when animation is complete
    $("#headerimg" + currentContainer).fadeOut(function() {
        setTimeout(function() {
            $("#headertxt").css({"display" : "block"});
            animating = false;
        }, 500);
    });
};

var stopAnimation = function() {
    // Change the background image to "play"
    $("#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);

});

代码来自这个演示和网站。 http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

4

0 回答 0