选择排列图像并继续

这里是第一次使用JavaScript编码器。选择排列图像并继续

尝试解决此问题，以便在单击该图像的适当按钮后显示图像，然后该功能继续显示阵列和循环中的其他图像。

例如，如果横幅显示图像4，并且用户单击图像2的按钮，则横幅应显示图像2，然后旋转显示图像3并继续循环。

下面是代码：

var i = 0; 
var baners = new Array(); 
baners.push('banner1.jpg'); 
baners.push('banner2.jpg'); 
baners.push('banner3.jpg'); 
baners.push('banner4.jpg'); 
baners.push('banner5.jpg'); 



function swapImage(){ 
var img = document.getElementById("banner"); 
    img.src = baners[i]; 
    if (i<(baners.length-1)){i++; 
    }else{ 
     i=0; 
    } 

setTimeout('swapImage()', 2000);   

} 



function button1(){ 
    var img = document.getElementById("banner"); 
    img.src = baners[0] 

}

我不确定是否有可能使一个全局函数的5个按钮。

谢谢！

来源

2014-02-05 MostOner

抓取按钮的索引并将其与数组索引匹配 –

它显示所选图像，但该功能通过索引保持滚动并且不遵循顺序。 – MostOner

顺便说一下，'baners'应拼写'banners'，并且每次只使用'setInterval（swapImage，2000）'而不是''eval''字符串。 – Bergi

我不确定是否有可能为5个按钮创建一个全局函数。

是的。使用这样的事情：

function buttonClicked(number) { 
    var img = document.getElementById("banner"); 
    img.src = baners[number] 
    i = number; // set current loop position 
}

然后调用buttonClicked(0)从按钮1，buttonClicked(1)从BUTTON2等。如果要使用for循环自动将处理程序附加到按钮，请查看JavaScript closure inside loops – simple practical example。

来源

2014-02-05 16:54:44 Bergi

谢谢！这正是我需要的。它现在像一种魅力。 – MostOner

我只是有一个问题，执行此操作时，间隔加倍。任何想法为什么？他们都在2秒内工作，但按下按钮需要4秒来加载下一个图像，然后再次2秒。 – MostOner

在你的'swapImage'循环中，你只是在更改图像后更新''i''，因此在调用'buttonClicked'后，下一个交换将不会改变任何内容。我没有想到这一点，但实际上我认为它比用户点击后仅显示一个小于2秒的横幅更具用户友好性:-) – Bergi

选择排列图像并继续

回答

相关问题