Question

我想制作一个幻灯片放映，让彼此相邻的图像显示出来。

我已经编写了代码，但我无法弄清楚如何将代码放在一起。

每张图片大小相同：960 x 600

提前致谢。

HTML

<div class="container">
    <img src="images/logo.png" alt="Club Penguin Item Codes" align:"left" class="logo" />
  <nav>
    <ul class="navigation">
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="clothing/index.html">Clothing Items</a></li>
        <li><a href="furniture/index.html">Furniture Items</a></li>
        <li><a href="igloos/index.html">Igloos</a></li>
        <li><a href="stamps/index.html">Stamps</a></li>
        <li><a href="music/index.html">Music</a></li>
        <li><a href="chat/index.html">Chat</a></li>
    </ul>
  </nav>
    <div class="homepage">
       <div id=slider>
          <figure>
              <img src="images/ss_clothes.png" alt="Club Penguin Clothes" align:"center" />
              <img src="images/ss_furniture.png" alt="Club Penguin Furniture" align:"center" />
              <img src="images/ss_igloos.png" alt="Club Penguin Igloos" align:"center" />
          </figure>
       </div>
       <div class="checkout">
           <h4>Also check out Penguin Lodge and Penguin Gold for more Club Penguin Cheats!</h4>
       </div>
    </div>
 </div>

CSS

@keyframes slider {
0% {
    Left: 0;
}

20% {
    Left: 0;
}

25% {
    Left: -100%;
}


45% {
    Left: -100%;
}

50% {
    Left: -200%
}

70% {
    Left: -200%;
}

75% {
    Left: -300%;
}

95% {
    Left: -300%;
}

100% {
    Left: -400;
}

}

#slider {
    overflow: hidden;
}


#slider figure img {
    width: 100%;
    float: left;
    display: inline;
}

#slider figure {
    position: relative;
    width: 300%
    margin: 0;
    Left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slider infinite; 
 }

Answer 1

您需要将图像设为33％才能将它们放在一起：

#slider figure img {
   width:33%;
   float: left;
}

http://codepen.io/anon/pen/VKLmxj

Answer 2

这可能会对你有帮助。

@keyframes slider {
  0% {
    Left: 0;
  }
  20% {
    Left: 0;
  }
  33.33% {
    Left: -100%;
  }
  50% {
    Left: -100%;
  }
  66.66% {
    Left: -200%;
  }
  80% {
    Left: -200%;
  }
  100% {
    Left: -200;
  }
}
#slider {
  overflow: hidden;
}
#slider figure {
  position: relative;
  width: 300%;
  margin: 0;
  Left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}
.img_container
{
  width:33.33%;
  float:left;
}
.img_container img {
  width: 100%;
}

<div class="container">

  <img src="images/logo.png" alt="Club Penguin Item Codes" align: "left" class="logo" />

  <nav>

    <ul class="navigation">

      <li><a href="index.html" class="active">Home</a>
      </li>

      <li><a href="clothing/index.html">Clothing Items</a>
      </li>

      <li><a href="furniture/index.html">Furniture Items</a>
      </li>

      <li><a href="igloos/index.html">Igloos</a>
      </li>

      <li><a href="stamps/index.html">Stamps</a>
      </li>

      <li><a href="music/index.html">Music</a>
      </li>

      <li><a href="chat/index.html">Chat</a>
      </li>

    </ul>

  </nav>

  <div class="homepage">

    <div id=slider>

      <figure>
      
        <div class="img_container">
          <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="Club Penguin Clothes" />
        </div>
        
        <div class="img_container">
          <img src="http://bbsimg02.kakaku.k-img.com/images/bbs/001/238/1238161_m.jpg" alt="Club Penguin Furniture" />
        </div>
        
        <div class="img_container">
          <img src="https://images.sciencedaily.com/2014/02/140223215134_1_900x600.jpg" alt="Club Penguin Igloos" />
        </div>
      </figure>

    </div>


    <div class="checkout">

      <h4>Also check out Penguin Lodge and Penguin Gold for more Club Penguin Cheats!</h4>

    </div>

  </div>

同时更改了keyframes以支持当前用于4张图片的3张图片。

如何将图像放在一起？

2 个答案: