Question

我需要帮助在我的幻灯片中实现幻灯片功能，我已经完成了大部分工作，从教程开始并在jquery网站上进行大量浏览，但现在我陷入困境并需要帮助。

我想要实现两件事，一个是让图像从右向左滑动，但第一张图像不能滑入，它会保持不变，但所有其他图像都会滑动。

我在底部有一个标题，我已经弄明白了如何显示和隐藏文本而不是彩色div，基本上我的目标是让一个标题/页脚显示一个链接在最后一张幻灯片，它会在特定幻灯片上停留一段时间，但如果不是那么好，因为前两个请求对我来说是最重要的。

JS Fiddle Link： http://jsfiddle.net/8bBYu/

提前谢谢，下面是javascript代码。

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

// 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" : "Dubstep is a genre of electronic dance music",
        "secondline" : ""
    }, {
        "title" : "Office Appartments",
        "image" : "work.jpg",
        "url" : "http://www.sxc.hu/photo/1265695",
        "firstline" : "Or still busy at",
        "secondline" : "work?"
    }, {
        "title" : "",
        "image" : "biking.jpg",
        "url" : "http://www.sxc.hu/photo/1221065",
        "firstline" : "Get out and be",
        "secondline" : "active"
    }, {
        "title" : "",
        "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 = 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
        $("#headerimg" + activeContainer).css({
            "background-image" : "url(images/" + photoObject.image + ")",
            "display" : "block",
            "z-index" : currentZindex
        });

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

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

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





    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);

});

Answer 1

您可能最好不要查看UI框架，例如jQuery Tools Scrollable。

http://flowplayer.org/tools/scrollable/

编写得很好，当你调用$（'＃selector'）时有一个可自定义的API。data（'scrollable'）

更改JS代码以使图像幻灯片

1 个答案: