Question

我对JavaScript不太熟悉。

我在容器上创建了一个包含5个div的网站。当我使用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>

我真的不知道我做错了什么！

Answer 1

您好像是在定位网页中的所有图片代码。您需要将其限制为仅div#main_image中的图像。

替换

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

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

使用JavaScript添加幻灯片放映了我的div

1 个答案: