Question

我正在使用下面的代码创建图像的“旋转”以显示在网站上。我希望图像显示在'div'元素中...而我很难做到这一点。似乎问题出在我尝试将每个图像设置为元素的“背景图像”（读取“ document.getElementById（“ rotation”）。style.backgroundImage =“ url（toString（ImgName [number]）的行））“;）。仅显示初始图像，而没有其他图像的“旋转”。感谢任何帮助，这变得非常令人沮丧。

<!DOCTYPE html>
<html>
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
div.rotation {
height: 256px;
width: 100%;
padding: 0px;
background-color: powderblue;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}
</style>
</head>

<body>

 <div class="w3-quarter">
  <div class="w3-padding-small">
   <div class="w3-center">
    <div class="rotation"> 
     <p>    
      <img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />
      <img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation'  />
      <img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />
      <img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />
     </p>
    </div>
   </div>
  </div>
 </div>

</body>
</html>

<script type='text/javascript'>
var rotation = function () {
var currentImage,
    images = [],
    ImgName = [],
    count,
    hideImages,
    showImage,
    fn;

    count = (function () {              
      // Figure out how many images we have on the rotation          
      var x = 0;
      while (document.getElementById('rotateImg' + (x + 1).toString())) {
        images[x] = document.getElementById('rotateImg' + x.toString());
        ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;
        x++;
      }
      return images.length;
    })();

    hideImages = function () {
      // Hide all the images              
      for (var i = 0; i < count; i++) {
        images[i].style.display = 'none';
      }
    };

    showImage = function (number) {
      document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))"; 
      images[number].style.display = 'block';
    };

    fn = {};
    fn.setupRotation = function () {
      // Show the first image
      currentImage = 0;
      showImage(currentImage);

      // Start the rotation
      var interval = setInterval(rotation.advanceRotation, 4000);
    };

    fn.advanceRotation = function () {
      if (currentImage + 1 == count)
        currentImage = 0;
      else
        currentImage++;
        hideImages();
        showImage(currentImage);
    };

    return fn;
    } ();

    rotation.setupRotation();      
  </script>

Answer 1

一个想法可能是摘下第一个孩子并将他猛撞到行尾。

let images = document.querySelector('#images');

setInterval(() => {
  let el = images.removeChild(images.childNodes[0]);
  images.appendChild(el);
}, 1000);

#images {
  font-size: 0;
}

.img {
  display: inline-block;
  width: 30px;
  height: 30px;
}

<div id="images">
  <div class="img" style="background-color: red"></div>
  <div class="img" style="background-color: orange"></div>
  <div class="img" style="background-color: yellow"></div>
  <div class="img" style="background-color: green"></div>
  <div class="img" style="background-color: blue"></div>
</div>

div元素中的图像“旋转”问题

1 个答案: