2

I am currently having an issue with a JavaScript Slider/Slideshow. Essentially, I have 4 images being displayed in the slider. However, I wish to have an image for the border of this slider, so it 'overlays' the images to make it appear like the slider images are inside of this border image.

My HTML code:

<body>
    <div id="container">
        <div id="frame"></div>
        <div id="slides">
            <a href="#" class="prev"></a>
            <a href="#" class="next"></a>
            <div class="slides_container">
                <img src="img/slider/1.jpg" width="954" height="247" alt="Slide 1">
                <img src="img/slider/2.jpg" width="954" height="247" alt="Slide 2">
                <img src="img/slider/3.jpg" width="954" height="247" alt="Slide 3">
                <img src="img/slider/4.jpg" width="954" height="247" alt="Slide 4">
            </div>
        </div>
    </div>
</body>

My CSS code:

/*
    Page style
*/

body { 
}

#container {
    width: 964px; 
    height: 257px;
    z-index: 99999;
    padding: 10px;
    margin: 0 auto;
    position: relative;
}

#frame {
    background: url(../img/slider_frame.png) no-repeat;
    width: 964px;
    height: 257px;
    position: absolute;
    top: -3px;
    left: -80px;
    z-index: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    pointer-events: none;
    -moz-box-shadow:;
    -webkit-box-shadow:;
    box-shadow: 0 0 5px #000, 0 0 6px #000;
}

/*
    Slideshow
*/

#slides {
    position: absolute;
    top: 1px;
    left: -74px;
    z-index: 100;

    width: 954px;
    height: 247px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

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

.slides_container {
    width: 954px;
    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 a {
    width: 570px;
    height: 270px;
    display: block;
}

.slides_container a img {
    display: block;
}

/*
    Next/prev buttons
*/

#slides .next, #slides .prev {
    position: absolute;
    top: 129px;
    left: -80px;
    width: 48px;
    height: 48px;
    display: block;
    z-index: 101;
}

#slides .next {
    background-image: url(../img/arrow-right.png);
}

#slides .next:hover {
    background-image: url(../img/arrow-right-hov.png);
}

#slides .prev {
    background-image: url(../img/arrow-left.png);
}

#slides .prev:hover {
    background-image: url(../img/arrow-left-hov.png);
}

#slides .next {
    left: 826px;
}

So essentially, my question is how do I make the images in the slider display inside of the slide's border?

4

1 に答える 1

0 
#container  {
    height: 257px;
    width: 964px;
    z-index: 99999;
}
#frame {
background: url(../img/slider_frame.png)  no-repeat scroll 0 0 transparent;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 5px #000000, 0 0 6px #000000;
    height: 257px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: -5px;
    width: 964px;
    z-index: 99999;
}
#slider ul, #slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#slider li, #slider2 li {
    border-radius: 3px 3px 3px 3px;
    height: 247px;
    overflow: hidden;
    width: 954px;
}

上記のコードはデモサイトで使用されています

于 2012-12-15T14:04:54.537 に答える