JavaScript Photo Slider
我正在制作一个JS脚本，它将放在标题div中并显示几张图片。 我调查了JQuery Cycle，但它不属于我的联盟。 我在下面写的代码会冻结浏览器，我应该使用带有timer var的for循环吗？
var timer; for (timer = 0; timer < 11; timer++) { if (timer = 0) { document.write('
'); } if (timer = 5) { document.write('
'); } if (timer = 10) { document.write('
'); } } 谢谢！
假设您想要一个脚本来旋转图像，而不是像代码那样将它们写入页面，您可以使用以下内容：
当然上面的代码没有jQuery给你的效果（比如淡入淡出），但它也不需要加载整个jQuery库来实现这么基本的东西。
如何在页面加载后运行脚本？
然后使用来运行脚本。
编辑要添加延迟加载图像，我重写了代码：
设置displayOnLoad = false; 如果要在加载第一张图像之前等待指定的delay 。 delay设置为秒。 我建议在图像之间等待一秒钟，因为它们可能需要一些时间才能下载（取决于用户的互联网速度）。
与第一个代码片段一样，我没有测试过代码，所以请告诉我是否发生错误，我会看看。
既然您在问题上使用了jquery标记，我认为您可以使用jQuery。 在这种情况下，您可以执行以下操作：
在静态HTML中，包含img标记并将其id设置为某个东西（在我的示例中，它设置为myImg ）并将其src属性设置为第一个图像，例如：
接下来，使用jQuery延迟脚本的执行，直到页面加载完毕，然后使用setTimeout创建进一步的延迟，以便用户在更改之前可以花几秒钟查看图像：
当然，这种方法不能很好地扩展，所以如果你总共使用三个以上的图像，你想要修改这样的方法：
var imgTimeoutMsecs = 5000; // Five seconds between image cycles // Array of img src attributes. var images = [ "https://stackoverflow.com/questions/8716004/javascript-photo-slider/images/one.png", "images/two.png", "images/three.png", "images/four.png", "images/five.png", ]; // Index into images array. var iCurrentImage = 0; function cycleImage() { // Increment to the next image, or wrap around. if (iCurrentImage >= images.length) { iCurrentImage = 0; } else { iCurrentImage += 1; } $("#myImg").prop("src", images[iCurrentImage]); // Reset the timer. setTimeout(cycleImages, imgTimeoutMsecs); } $(function() { // Document is ready. // Cycle images for as long as the page is loaded. setTimeout(cycleImages, imgTimeoutMsecs); });
可以对该示例进行许多改进。 例如，您可以使用setInterval而不是setTimer来略微简化此代码。
您提供的代码只是遍历for循环，将图像写入浏览器。 我建议你看一下JavaScript setTimeout函数。 JS时间