使用數組來創建動態圖像滑塊

當前我想創建一個圖像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

使用數組來創建動態圖像滑塊

回答

相關問題