Question

我有一个使用jQuery按图像滚动图像的幻灯片。当我添加<a href="#">时，幻灯片停止效果。

你能帮助我吗？

$(document).ready(function(){
    var container = $("#container");
    var height = container.height();
    var children = container.children();
    var len = children.size();
    var i = 0;

    children.each(function(i,e){$(e).css('z-index', len - i);});

    var animate = function()
    {
        var img = children.eq(i);
        var prev = i == 0 ? children.eq(len - 1) : children.eq(i - 1);
        prev.css('opacity', 1);
        i = i == len - 1 ? 0 : i + 1;
        var next = children.eq(i);
        var top = img.height() - height;
        img.css('z-index', len);
        next.css('z-index', len - 1);
        next.css('opacity', 1);
        next.show();
        img.animate({top: -top}, 2000, "swing", function(){
            img.fadeOut(1000, function() {
                img.css('z-index', 0);
                img.css('top', 0);
                animate();
            }); 
        });
    }

    animate();
});

我的脚本：http://jsfiddle.net/d4n7dcnf/12/

Answer 1

如果用<a href="#">包装图像，则需要更改#container > a的css第12行。查看脚本的分支：http://jsfiddle.net/jt1vhk4d/

animate（）滚动不使用href

1 个答案: