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

Question

我想在我的网站上显示幻灯片，并使用下面的代码，但它只循环前3张图片。请有人能告诉我如何让它循环遍历所有图片？

#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%; 
 
    } 
 
}

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

任何帮助，将不胜感激！

Answer 1

你可以使用j查询插件幻灯片有真棒插件幻灯片。 为如： http://owlgraphic.com/owlcarousel/