Question

我是JS新手，所以在这里轻松自如。但我写了一个简单的幻灯片，它似乎运行得很慢。以下代码在我自己的机器上本地加载大约需要2-4秒。想知道造成延误的原因。让我知道，谢谢！

function slideshow(){
    $("#1").animate({top: "50px",}, 500).delay(2000);
    $("#1").animate({top: "400px",}, 500);
    $("#2").animate({top: "50px",}, 500).delay(2000);
    $("#2").animate({top: "400px",}, 500);
    $("#3").animate({top: "50px",}, 500).delay(2000);
    $("#3").animate({top: "400px",}, 500);
    $("#4").animate({top: "50px",}, 500).delay(2000);
    $("#4").animate({top: "400px",}, 500);
    $("#5").animate({top: "50px",}, 500).delay(2000);
    $("#5").animate({top: "400px",}, 500);
    slideshow();
}

每个ID代表不同的图像。

Answer 1

你的代码的大问题，因为其他答案似乎都没有谈到它，是slideshow()的最后一行递归调用自己，这将导致堆栈溢出。不要这样做：

function slideshow() {
   // animate code
   slideshow();
}

相反，如果您希望它重复运行，请使用setTimeout()将函数 x 的另一次执行排队：

function slideshow() {
   // animate code
   setTimeout(slideshow, 3500);
}

你拥有它的方式，实际上没有任何功能完成。对于setTimeout()，每次slideshow()的调用都会完成，然后在指定的延迟之后运行一个单独的调用。我会使延迟足够大，以至于在当前动画完成后发生下一次调用，否则你将比运行更快地排队越来越多的动画。

更新： jQuery为每个元素维护单独的动画队列，这意味着五个元素上的动画将同时运行。其他一些答案已经提供了一次一个地按顺序运行动画的方法，但这是我如何做的：

$(window).on("load",function() {    
    // cache a jQuery object containing the elements to animate
    // (note you don't need their ids if you use their class)
    var $imgs = $('img.slideshow-image'),
        i = 0;

    function slideShow() {
       // start animation for "current" img
       $imgs.eq(i).show(1)
                  .animate({top: "50px",}, 500)
                  .delay(2000)
                  .animate({top: "400px",}, 500)
                  .hide(1, function() {
                     i = (i+1) % $imgs.length;
                     setTimeout(slideShow, 500);
                  });
    }    
    slideShow();    
});

工作演示：http://jsfiddle.net/bARwb/

我已经将代码包装在一个加载处理程序中，以消除对内联onload=属性的需求，并将代码保留在全局范围之外（如果你这样做，那么就是这样）忘记从身体标签中删除onload="slideShow()"。
我添加了.show()和.hide()次调用（持续时间，以便他们加入动画队列），以便img元素具有display:none在动画之间，因为否则使用position:relative样式除了第一个（但position:absolute更改为overflow:hidden之外的任何内容时，您都看不到它们会阻止它们被父级.hide()裁剪。
当动画结束元素时，来自i的回调递增setTimeout()以引用下一个元素的索引（但检查它何时超过最后一个元素）然后使用{{1为下一个元素排队动画。

Answer 2

你有一些重复，也有一些不正确的假设。

在jQuery中调用.animate时，可以指定在动画完成时调用的回调。这是放置“下一步”的地方。

所以在这个例子中：

动画图片
完成后，等待2秒
2秒后，为图像设置动画
完成后，使用下一个图像调用该功能

这就是它的外观

var images = ['#1', '#2', '#3', '#4', '#5'];

function slideshow(index){
    if (index >= images.length) {
        index = 0;
    }
    var image = images[index];
    $(image).animate({top: "50px",}, 500, function () {
        window.setTimeout(function () {
            $(image).animate({top: "400px",}, 500, function () {
                slideshow(index + 1);
            });
        }, 2000);
    });
}

Answer 3

我的猜测是你将帧数设置为2秒（2000）。尝试像50这样更快的东西，看看你看到了什么。我不确定这是帧延迟还是500帧，但如果其中任何一个代表你在帧更改之间等待多长时间，那就太长了。

Answer 4

除了代码中的故意延迟，我没有看到任何会导致缓慢加载的内容。它可能是页面的其余部分。在JavaScript幻灯片放映功能执行之前，我会检查您的图像有多大以及可能正在下载的任何其他文件。

作为旁注，从幻灯片功能中调用幻灯片显示很奇怪。

Answer 5

您可以尝试这样的事情：

var intervalValue = setInterval( "slideshow()", 2000 );
var slideshow_imageindex = 1;

function slideshow()
{
  //check if imageindex is greater than the number of images available (5 is an example)
  if (slideshow_imageindex > 5)
  {
    slideshow_imageindex = 1;
  }
  //hide image below, change image src, then move image so that it is visible again
  $("#1").animate({top: "400px",}, 500).attr('src','img/Slideshow-Audio-Trsfr'+slideshow_imageindex+'.png').animate({top: "50px",}, 500);
  //increase image index
  slideshow_imageindex++;
}

你只需要一个img（我保持你的“id =＃1”img），并且每2秒隐藏一次图像，它会改变并再次显示。只需要做的事情：为图像命名，以便只更改数字，例如：

img/Slideshow-Audio-Trsfr1.png
img/Slideshow-Audio-Trsfr2.png
img/Slideshow-Audio-Trsfr3.png
img/Slideshow-Audio-Trsfr4.png
img/Slideshow-Audio-Trsfr5.png

然后使用函数中“if”中的图像数量。在意大利已经很晚了，希望我没有忘记任何事情：）

JS代码运行速度很慢

5 个答案: