我做了一个幻灯片，但它是不是在这个时候响应，即.而不是缩小到更小的浏览器窗口。
这是因为我在css中声明了高度和宽度，但是当我将它们更改为百分比时，它阻止了我的幻灯片显示。
我的html：

<div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
<img src="../Images/golden.jpg"/>
 <div class="slideText">
 <h2>Golden pearl</h2> 
 <p>This golden pearl came from a farm in the south china sea</p>
 </div> <!-- </slideText> -->
 </div>
      <!-- </slide> repeat as many times as needed --> 
     <div class="slide">
         <img src="../Images/zen.jpg"/> 
 <div class="slideText">
 <h2>Simply Zen</h2> 
 <p>What else is there to say?!</p>
 </div> <!-- </slideText> -->
 </div>
      <!-- </slide> repeat as many times as needed --> 
     <div class="slide">
 <img src="../Images/rain.jpg"/>
 <div class="slideText">
 <h2>Lariat In 'Rain'</h2> 
 <p>Lariat In 'Rain' motif using diamonds, white gold, Tahitian pearls, and silk.</p>
 </div> <!-- </slideText> -->
 </div>
      <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

我的css：

img {
    display: block;
    width: 100%;
    height: auto;
}
p{
    background:none;
    color:#ffffff;
}
#slideShow #slideShowWindow {
    width: 650px;
    height: 450px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow:hidden;
    margin-left: auto;
    margin-right:auto;
}

#slideShow #slideShowWindow .slide {
        margin: 0;
        padding: 0;
        width: 650px;
        height: 450px;
        float: left;
        position: relative;
        margin-left:auto;
        margin-right: auto;
    }

#slideshow #slideshowWindow .slide{
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    
    
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}

.slideText {
    background: rgba(128, 128, 128, 0.49);
    text-align:center;
    bottom:0;
    padding:10px;
}


#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
    display: block;
    text-indent: -10000px;
    position: absolute;
    cursor: pointer;
}
#leftNav {
    left: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    background-image: url("../Images/plus_add_minus.png");
    background-repeat: no-repeat;
    z-index: 10;
}
#rightNav {
    right: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    background-image: url("../Images/plus_add_green.png");
    background-repeat: no-repeat;
    z-index: 10;
}
.hiding{
    display:none;
}
.showing{
    display:block;
}

我的jQuery：

$(document).ready(function () {

    var currentPosition = 0;    
    var slides = $('.slide');
    var slideWidth = 650;
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;

    //Assign a timer, so it will run periodically
    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>');

    slides.css({ 'float': 'left' });

    //set #slidesHolder width equal to the total width of all the slides
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);

    $('#slideShowWindow')
    .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
    .append('<span class="slideNav" id="rightNav">Move Right</span>');

    manageNav(currentPosition);

    //tell the buttons what to do when clicked
    $('.slideNav').bind('click', function () {

        //determine new position
        currentPosition = ($(this).attr('id') === 'rightNav')
        ? currentPosition + 1 : currentPosition - 1;

        //hide/show controls
        manageNav(currentPosition);
        clearInterval(slideShowInterval);
        slideShowInterval = setInterval(changePosition, speed);
        moveSlide();
    });

    function manageNav(position) {
        //hide left arrow if position is first slide
        if (position === 0) {
            $('#leftNav').hide();
        }
        else {
            $('#leftNav').show();
        }
        //hide right arrow is slide position is last slide
        if (position === numberOfSlides - 1) {
            $('#rightNav').hide();
        }
        else {
            $('#rightNav').show();
        }
    }

    //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
    function changePosition() {
        if (currentPosition === numberOfSlides - 1) {
            currentPosition = 0;
            manageNav(currentPosition);
        } else {
            currentPosition++;
            manageNav(currentPosition);
        }
        moveSlide();
    }

    //moveSlide: this function moves the slide 
    function moveSlide() {
        $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
    }

});