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

当前我想创建一个图像slider.a两个元素数组用于存储图像sources.don't知道最新错误，我的滑块不工作，虽然一切看起来很好.pls帮我出.thanks使用数组来创建动态图像滑块

<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>

来源

2014-05-17 AL-zami

错字在你的例子只有或者这是在您的实际代码：'doucment.getElementById（ “MYIMAGE”）;'？ – j08691

在CSS中，您必须使用'#myimage {opacity：0;}'而不是'#myimage {opacity = 0;}' – Oriol

thanks.it现在已经修复，实际上它是在我自己的代码中。我使用记事本，不显示任何错误。 :( –

我可以看到你发布的代码的几个问题：

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

的CSS：

#myimage { 
    opacity=0; 
}

应该

#myimage { 
    opacity:0; 
}

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

应该是：

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

注：如果按F12在您的浏览器，控制台将打开，它会告诉你这个错误ORS。

来源

2014-05-17 16:15:36 Andrei

非常感谢:)）其固定。 –

不客气！如果有帮助，请不要忘记接受答案。 – Andrei

您需要更正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>

干杯，阿肖克

来源

2014-05-17 16:26:37

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

回答

相关问题