Javascript中的图像数组_Javascript_Arrays

Javascript中的图像数组

javascript arrays

Javascript中的图像数组,javascript,arrays,Javascript,Arrays,所以我做了一些研究，发现了一些非常接近我需要的东西（一个非常非常简单的自动幻灯片，使用数组中的图像）。但是，我发现的代码实际上并没有使用图像，我也不太确定如何修改代码，使其能够处理图像数组而不是字符串。我只做了一些关于用图像创建阵列的工作任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> <script> var wss_i = 0; var wss_elem; var wss_array = new Array;

所以我做了一些研究，发现了一些非常接近我需要的东西（一个非常非常简单的自动幻灯片，使用数组中的图像）。但是，我发现的代码实际上并没有使用图像，我也不太确定如何修改代码，使其能够处理图像数组而不是字符串。我只做了一些关于用图像创建阵列的工作

任何帮助都将不胜感激

<!DOCTYPE html>
<html>
<head>
<script>
var wss_i = 0;
var wss_elem;
var wss_array = new Array;
wss_array[0] = "img0.png";
wss_array[1] = "img1.png";
wss_array[2] = "img2.png";
wss_array[3] = "img3.png";
wss_array[4] = "img4.png";
wss_array[5] = "img5.png";

function wssNext(){
wss_i++;
if(wss_i > (wss_array.length - 1)){
wss_i = 0;
}
setTimeout('wssSlide()',1000);
}

function wssSlide(){
wss_elem.innerHTML = wss_array[wss_i];
setTimeout('wssNext()',2000);
}
</script>
</head>
<body>
<h1>My dog is <span id="wss"></span></h1>
<script>wss_elem = document.getElementById("wss");
wssSlide();
</script>
</body>    </html>


var wss_i=0；
var wss_elem；
var wss_数组=新数组；
wss_数组[0]=“img0.png”；
wss_数组[1]=“img1.png”；
wss_数组[2]=“img2.png”；
wss_数组[3]=“img3.png”；
wss_数组[4]=“img4.png”；
wss_数组[5]=“img5.png”；
函数wssNext（）{
wss_i++；
if（wss_i>（wss_array.length-1））{
wss_i=0；
}
setTimeout（'wssSlide（）'，1000）；
}
函数wssSlide（）{
wss_elem.innerHTML=wss_数组[wss_i]；
setTimeout（'wssNext（）'，2000）；
}
我的狗是
wss_elem=document.getElementById（“wss”）；
wssSlide（）；

您可以插入用于显示图像的

标记：

将

替换为

元素，您的代码可能会如下所示：

就这样

将整个代码放在

元素末尾的

标记中，以确保在代码运行之前加载DOM。

如果这是您在研究中发现的代码，请进行更多研究-这是可怕的代码！我愿意接受建议！我对编写JavaScript非常陌生，我只是在寻找用图像数组创建幻灯片的最简单方法。这是我遇到的最合适的代码/它有两个^W三个非常新手的错误-1。wss_数组[n]一次又一次地重复，而不是简单的

var wss_数组=[元素列表]

，以及2。将字符串传递到

setTimeout

，3。具有全局变量的大规模污染这确实不是一个好的解决方案-应该有一个静态图像元素，其

src

使用DOM属性进行更改！说得好。我会更新我的答案以考虑你的建议。

<span id="wss"><img id="my_img" src="img0.png" /></span>

function wssSlide() {
    var img = document.getElementById('my_img');
    img.src = wss_array[wss_i];
    window.setTimeout(wssNext, 2000);
}

(function() {                       // anonymous function expression - no globals!

    // following declarations are local to the function
    var wss = document.getElementById("wss");
    var imgs = [ "img0.png", "img1.png", ... ];
    var n = 0;

    (function next() {
        wss.src = imgs[n];          // set the image's src
        n = (n + 1) % imgs.length;  // increment the counter
        setTimeout(next, 2000);     // and queue up the next change
    })();                           // invoke immediately so the first image loads

})();                               // start it all up