html - SlidesJS 显示 :none not working properly

Question

我最近开始为一个 friend 编写网站代码，他问我是否可以向该网站添加幻灯片以显示图像。因此，因为我不知道 Javascript，所以我找到了一个可以使用的开源免费幻灯片，称为 SlidesJS。我已经设法自定义了所有内容，但是现在当图像显示在幻灯片上而不是滑过并显示在幻灯片上时，它们会滑过整个屏幕覆盖其他内容，所以这很烦人。我试过 display:none 试图在图像滑入到位时隐藏图像，但它似乎不起作用! 这是我的代码:

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;