フェード付きの画像スライダーを作成しようとしています。オンラインで見つけた各コード セットは、Mac/Safari でのみ機能しますが、Mac/Chrome または Mac/Firefox では機能しません。Windows で試してみたところ、Windows/Chrome と Windows/Firefox では動作しますが、Windows/IE では動作しません。私が間違っていることはありますか？また、画像にポップアップ peekaboos (キャプション) を追加したいと考えていました。これが私のコードです：
<!doctype html>
<html>
<head>
<style>
body{
background-color:black;
padding:0;
margin:0;
width:850px;
height:300px;
}
img{
-moz-transition-property: opacity;
-moz-transition-duration: 3s;
-webkit-transition-property:opacity;
-webkit-transition-duration: 3s;
position:absolute;
width: 850px;
height:300px
}
img.fade-out{opacity:0}
img.fade-in{opacity:1}
</style>
</head>
<body>
<img src="Image1.jpg"/>
<img src="Image2.jpg"/>
<img src="Image3.jpg"/>
<img src="Image4.jpg"/>
<script>
var interval = 4 * 20; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</body>
</html>