0

私は JavaScript の経験があまりありません。

コンテナーに 5 つの div を持つ Web サイトを作成しました。JavaScript でスライドショーを追加すると、すべての画像が一番上にジャンプし、サイトのヘッダーとして使用する画像がスライドショーの別の画像になります。

スライドショーの画像にクラスを割り当てようとしましたが、これを JavaScript のコードに組み込む方法がわかりません。これにより、(ページ上のすべての画像ではなく) それらにのみ焦点が当てられます。

（誰かが助けてくれたらどうもありがとう!!! 私は怠惰ではありません。答えが見つからないようです!!!）

コードは次のとおりです。

<style type="text/css">
body {
background-image: url(layout/background.png);
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:5s;
position:absolute;
width:320;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>

</head>

<body>
<div id="container">
<div id="header">
<br>
  <ul>
    <li><img src="main-menu4.gif" width="984" height="290" ></li>
  </ul>
 </div>


<div id="main_image">
<h1>Events</h1>
<br>
<img class="slideshow" src="hotdog.jpeg" width="450" height="auto" >
<img src="girlonslide.jpeg" width="450" height="auto" class="slideshow">
<img src="games/extremefun.jpg" width="450" height="auto" class="slideshow">
<img src="games/climbing.jpeg" width="450" height="auto" class="slideshow">
<img src="games/cartgame.jpeg" width="450" height="auto" class="slideshow">
<img src="pizza.JPG" width="450" height="auto" class="slideshow">
<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>

私は自分が間違っていることを本当に知りません！

4

1 に答える 1

0

ページ内のすべてのイメージ タグをターゲットにしているようです。の画像のみに制限する必要がありますdiv#main_image。

その交換を行うには 

var images = document.getElementsByTagName("img");

と 

var images = document.getElementById("main_image").getElementsByTagName("img");
于 2013-02-02T09:25:05.210 に答える