Question

目前我正在尝试创建一个图像slider.a两个元素数组用于存储图像源。不知道什么是错的，我的滑块不工作，虽然一切看起来很好.pls帮助我。谢谢

<html>
<head>
<style>
#myimage {
    opacity=0;
}
</style>
</head>
<body>
<script>
function lol(){
    var check=true;
    var i=0;
    var array=["car1.jpg","car2.jpg"];
    var imgs=doucment.getElementById("myimage");
    setInterval(function(){
        if(check){
            imgs.style.opacity=1;
            imgs.style.transition="opacity 2s ease-in-out";
            imgs.src=array[i];
            i++;
            if(i=2){i=0;}
            check=false;
        }else{
            imgs.style.opacity=0;
            imgs.style.transition="opacity 2s ease-in-out";
            check=true;
        }
    },2000);
}    
window.onload=lol;
</script>
<img src="" id="myimage">
</body>
</html>

Answer 1

我可以在您发布的代码中看到一些问题：

doucment.getElementById("myimage");应为document.getElementById("myimage");

css：

#myimage {
    opacity=0;
}

应该是

#myimage {
    opacity:0;
}

if(i=2){i=0;}

应该是：

if(i === 2){i=0;}

注意：如果您在浏览器中按 F12 ，控制台将会打开并显示错误。

Answer 2

您需要纠正两个步骤：

将错误 doucment 改为文档

var imgs = document.getElementById（“myimage”）;
将您的JS代码添加到页面底部

建议更好的滑块：，因为您正在寻找滑块，因此您应该始终与数组长度进行比较，如下所示：

如果（I == array.length）{I = 0;}

现在这里是完整的工作代码。

<!DOCTYPE html> <html> <head> <style> #myimage { opacity=0; } </style> </head> <body> <script> function lol(){ var check=true; var i=0; var array=["car1.jpg","car2.jpg"]; var imgs=document.getElementById("myimage"); setInterval(function(){ if(check){ imgs.style.opacity=1; imgs.style.transition="opacity 2s ease-in-out"; imgs.src=array[i]; i++; if(i==array.length){i=0;} check=false; }else{ imgs.style.opacity=0; imgs.style.transition="opacity 2s ease-in-out"; check=true; } },2000); } window.onload=lol; </script> <img src="" id="myimage"> </body> </html>

干杯，阿肖克

使用数组创建动态图像滑块

2 个答案: