SlidesJS显示：无法正常工作

Question

我最近开始为朋友编写一个网站，他问我是否可以在网站上添加幻灯片以显示图像。所以，因为我不知道Javascript，所以我找到了一个可以使用的名为SlidesJS的开源免费幻灯片。我已经设法自定义所有内容，但现在当图像显示在幻灯片上而不是滑过并显示在幻灯片上时，它们将滑过整个屏幕覆盖其他内容，因此变得非常烦人。我试过显示器：没有试图隐藏图像，因为它们滑入位置，但它似乎不工作！ 这里是我的代码：

HTML：

<div id="ss"> 

    <div id="slides"> 
     <div class="slides_container"> 
      <div class="slide"> 
       <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="692" height="395" alt="Slide 1"></a> 
      </div> 
      <div class="slide"> 
       <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="690" height="395" alt="Slide 2"></a> 
      </div> 
      <div class="slide"> 
       <a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="690" height="395" alt="Slide 3"></a> 
      </div> 
      <div class="slide"> 
       <a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="690" height="395" alt="Slide 4"></a> 
      </div> 
      <div class="slide"> 
       <a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="690" height="395" alt="Slide 5"></a> 
      </div> 
      <div class="slide"> 
       <a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="690" height="395" alt="Slide 6"></a> 
      </div> 
      <div class="slide"> 
       <a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="690" height="395" alt="Slide 7"></a> 
      </div> 
     </div> 
     <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
     <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> 
    </div> 
    <img src="img/example-frame.png" alt="Example Frame" name="frame" width="739" height="341" id="frame"> 
</div> 
<div class="clear"></div> 
</div> 

CSS：

#ss { 
width:900px; 
height:500px; 
position:relative; 
margin-left:30px; 
} 


#frame { 
position:absolute; 
z-index:0; 
width:900px; 
height:500px; 
top:-3px; 
left:-80px; 

} 

/* 
Slideshow 
*/ 

#slides { 
position:absolute; 
top:24px; 
left:24px; 
z-index:100; 
} 

/* 
Slides container 
Important: 
Set the width of your slides container 
Set to display none, prevents content flash 
*/ 

.slides_container { 
width:900px; 
overflow:hidden; 
position:relative; 
display:none; 
} 

/* 
Each slide 
Important: 
Set the width of your slides 
If height not specified height will be set by the slide content 
Set to display block 
*/ 

.slides_container div.slide { 
width:692px; 
height:395px; 
display:none; 
} 


/* 
Next/prev buttons 
*/ 

#slides .next,#slides .prev { 
position:absolute; 
top:165px; 
left:-44px; 
width:24px; 
height:43px; 
display:block; 
z-index:101; 
} 

#slides .next { 
left:710px; 
} 

/* 
Pagination 
*/ 

.pagination { 
margin:26px auto 0; 
width:100px; 
margin-left:260px; 
} 

.pagination li { 
float:left; 
margin:0 1px; 
list-style:none; 
} 

.pagination li a { 
display:block; 
width:12px; 
height:0; 
padding-top:12px; 
background-image:url(../img/pagination.png); 
background-position:0 0; 
float:left; 
overflow:hidden; 
} 

.pagination li.current a { 
background-position:0 -12px; 
} 




ThankYou in Advance. 

Answer 1

试着将一整个事情在一个div与给定的宽度和高度，并添加CSS属性overflow:hidden;