用JavaScript添加幻灯片放映会把我的节目搞得一团糟_Javascript

用JavaScript添加幻灯片放映会把我的节目搞得一团糟

javascript

用JavaScript添加幻灯片放映会把我的节目搞得一团糟,javascript,Javascript,我对JavaScript不是很有经验我已经创建了一个容器上有5个div的网站。当我添加带有JavaScript的幻灯片时，所有图像都跳到顶部，我用作站点标题的图像成为幻灯片中的另一个图像我尝试为幻灯片上的图像分配一个类，但我不知道如何将其合并到JavaScript上的代码中，以便它只关注这些图像（而不是我页面上的所有图像）（如果有人能帮忙的话，非常感谢！！！我不是在偷懒，我只是似乎找不到答案！！！）代码如下： <style type="text/css"> body { ba

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


身体{
背景图片：url（layout/background.png）；
}
img{
-webkit转换属性：不透明度；
-webkit过渡时间：5s；
位置：绝对位置；
宽度：320；
高度：自动；
}
淡出{opacity:0；}
img.fade-in{opacity:1；}





事件


var区间=4*20//更改间隔秒数
var images=document.getElementsByTagName（“img”）；
var imageArray=[]；
var imageCount=images.length；
无功电流=0；
var randomize=函数（）{
return（Math.round（Math.random（）*3-1.5））；
}
对于（变量i=0；i


我真的不知道我做错了什么
 您似乎将目标锁定在页面中的所有图像标记上。您需要将其限制在div#main_图像
中的图像
要执行此操作，请替换
var images = document.getElementsByTagName("img");

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

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

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