CSS和HTML幻灯片只显示3张图片

Question

我想在我的网站上显示幻灯片，我使用了以下代码，但它只循环显示前3张图片。请有人告诉我如何让它循环浏览所有图片吗？

＆＃13;

＆＃13;

#slider-container1 {
  zoom: ; max-width: 1300px;
  max-height: 360px;
  z-index: 90;
  margin: 0px 0px 0px 0px;
}

#slider-container1 .wn_images ul {
  position: relative;
  width: 10000%;
  height: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-spacing: 0;
  overflow: visible;
}

#slider-container1 .wn_images ul li {
  position: relative;
  width: 1%;
  height: 100%;
  line-height: 0;
 /*opera*/
  overflow: hidden;
  float: left;
  font-size: 0;
  padding: 0 0 0 0 !important;
  margin: 0 0 0 0 !important;
}

#slider-container1 .wn_images {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  max-height: 360px;
  max-width: 100%;
  vertical-align: top;
  border: none;
  overflow: hidden;
}

#slider-container1 .wn_images > ul {
  animation: wnBasic 12s infinite;
  -moz-animation: wnBasic 12s infinite;
  -webkit-animation: wnBasic 12s infinite;
}

@keyframes wnBasic {
  0% {
    left: -0%;
  }

  16.67% {
    left: -0%;
  }

  33.33% {
    left: -100%;
  }

  50% {
    left: -100%;
  }

  66.67% {
    left: -200%;
  }

  83.33% {
    left: -200%;
  }
}

@-moz-keyframes wnBasic {
  0% {
    left: -0%;
  }

  16.67% {
    left: -0%;
  }

  33.33% {
    left: -100%;
  }

  50% {
    left: -100%;
  }

  66.67% {
    left: -200%;
  }

  83.33% {
    left: -200%;
  }
}

@-webkit-keyframes wnBasic {
  0% {
    left: -0%;
  }

  16.67% {
    left: -0%;
  }

  33.33% {
    left: -100%;
  }

  50% {
    left: -100%;
  }

  66.67% {
    left: -200%;
  }

  83.33% {
    left: -200%;
  }
}

＆＃13;

<div id="slider-container1">
    <div class="wn_images">
        <ul>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-0-easy-resize-com_orig.jpg" alt="Nature"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-1-easy-resize-com_orig.jpg" alt="Explore"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-2-easy-resize-com_orig.jpg" alt="Church"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-3-easy-resize-com_orig.jpg" alt="Explore"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-4-easy-resize-com_orig.jpg" alt="Explore"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-5-easy-resize-com_orig.jpg" alt="Explore"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-6-easy-resize-com_orig.jpg" alt="Explore"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-7-easy-resize-com_orig.jpg" alt="Explore"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-8-easy-resize-com_orig.jpg" alt="Explore"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/4/3/1/6/43169363/residential-slide-show-9-easy-resize-com_orig.jpg" alt="Explore"/>
                </a>
            </li>
        </ul>
    </div>
</div>undefined</div>

＆＃13;

＆＃13;

＆＃13;

任何帮助将不胜感激！

Answer 1

你可以使用j查询插件进行幻灯片放映，幻灯片显示有很棒的插件。 例如： http://getbootstrap.com/javascript/#carousel http://owlgraphic.com/owlcarousel/