在html中旋转图像答案

【问题标题】：rotating images in html在html中旋转图像
【发布时间】：2013-11-04 16:12:38
【问题描述】：

大家好，我正在尝试使用 javascript 让这些图像在 HTML 中每 5 秒旋转一次。我不知道为什么图像不旋转，如果有人可以帮助我，那就太好了！谢谢。

<!DOCTYPE html>
<html>

<head>

<title>Concert Ads</title>

<script type="text/javascript">

var image1=new Image()
image1.src="concert1.gif"

var image2=new Image()
image2.src="concert2.gif"

var image3=new Image()
image3.src="concert3.gif"

var image4=new Image()
image4.src="concert4.gif"

var image5=new Image()
image5.src="concert5.gif"


</script>

</head>

<body>

<img src="concert1.gif" name="slide" >

<script type="text/javascript">


var step=1
function slideit() { 
document.images.slide.src=eval("image"+step+".src")

if(step<5)

step++

else

step=1

setTimeout("slideit()",5000)

slideit()

</script>

</body>


</html>

【问题讨论】：

标签： javascript image slideshow

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        var image1 = new Image()
        image1.src = "dummyImg1.jpg"

        var image2 = new Image()
        image2.src = "dummyImg2.jpg"

        var image3 = new Image()
        image3.src = "dummyImg3.png"
    </script>
</head>
<body>
    <img src="dummyImg1.jpg" name="slide" >
    <script type="text/javascript">
        var step = 1
        function slideit() {
            document.images["slide"].src = eval("image" + step + ".src")
            if (step < 3)
                step++
            else
                step = 1
            setTimeout("slideit()", 5000)
        }
        slideit()
    </script>
</body>
</html>

【讨论】：

为什么要投反对票？这是一个工作演示（Firefox 24.0 / Linux）。
投了反对票，因为您没有给出任何解释，只是粘贴代码无助于任何人释放存在的问题。此外，您 setTimout 在您的函数内，因此将立即循环 3 次，并且无法引用 slideit。见jsfiddle.net/L4bTX/1
@Dominic Green：您写道“仅仅粘贴代码并不能帮助任何人了解存在的问题”。我不确定我是否理解你，因为 leo.org - 我不是以英语为母语的人 - 不知道“relaise”的任何翻译。至少提问者 user2863675 评论说“感谢您的帮助！”。因此，您的“对任何人都没有帮助”绝对是错误的，尤其是 user2863675 的评论发布在您之前。
@Dominic Green（续）：此外，您还写了“另外，您的 setTimout 在您的函数中，因此会立即循环 3 次，并且无法引用 slideit。”。如果有问题（甚至忽略你错误的英语）来理解你对这句话的意思。不，函数“slideit”中没有“循环”（正如我所指出的），它只是 5 秒后对“自身”的调用，根据需要触发循环。是的，在第一次调用它的函数之后，有一个关于“slideit”的参考。
@Dominic Green（续）：所以，你们批评者认为第一部分不正确，第二部分要么难以理解，要么完全错误。总而言之，我看不出你投反对票的任何合理理由。

【解决方案2】：

您的 setTimeout 函数不正确，因为您传递的是字符串，而不是函数，并且您没有关闭函数。每次创建一个新的图像项也是非常低效的；一个数组会更适合你。最后，我认为您想使用 setInterval 而不是 setTimeout。

这里有一个工作示例：http://jsfiddle.net/HUP5W/2

很明显，图像不起作用，但是，如果您查看控制台，它可以正常工作。

var image = document.getElementById("img1");
var src = ["concert2.gif","concert3.gif","concert4.gif","concert5.gif","concert1.gif"];

var step=0
    function slideit() { 
        image.src = src[step];
        image.alt = src[step];
        if(step<4) {
            step++;
        } else {
            step=0;
        }
    }        
    setInterval(slideit,5000);

【讨论】：

或setTimeout(slideit,5000)
没问题，我只是在示例中做了一个小时间来修复索引问题，如果它解决了您的问题，别忘了标记为已回答，祝您好运。
@Dominic Green 亲爱的 Dominic，请参阅developer.mozilla.org/en-US/docs/Web/API/… 了解将字符串传递给 setTimeout 函数是不是不正确的，它是一种替代方法。如果某些长时间运行的 JavaScript 会延迟页面执行，则使用 setInterval 而不是 setTimeout 可能会导致问题。使用 setTimeout 保证即使延迟更长的 5000 毫秒也不会造成混乱。