Div在調整窗口大小時跳出空間

Question

固定！ （下面的答案）

我有這個動畫橫幅，它包含在所有頁面中。 不幸的是，當調整瀏覽器窗口的大小時，它會跳出他的空間。

您可以在這里查看： http : //www.paparashie.nl/woonkans/

這是代碼：

<style> 

#banner{
    position: relative;
    margin-left:-1000px;
    height:195px;
    width:1000px;
    z-index:1;
}   

#banner img{position:absolute;z-index:1}
#banner img.active{z-index:4}

<script>
    function cycleImages() {
    var $active = $('#banner .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#banner img:first');
    $next.css('z-index', 2); //move the next image up the pile
    $active.fadeOut(1500, function () { //fade out the top image
        $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
        $next.css('z-index', 3).addClass('active'); //make the next image the top one
    });
}
    $(document).ready(function () {
     // run every 2s
     setInterval('cycleImages()', 2000);
 })
</script>


<div id="banner">
<img src="img/logo.png" style="float:left"  />
<img class="active" src="img/banner.png" alt="Banner image" />
<img src="img/banner2.png" alt="Banner image" />    
<img src="img/banner3.png" alt="Banner image" />    
<img src="img/banner4.png" alt="Banner image" />
</div>

---

因此，我將邊距更改為margin：0 auto。 下一個錯誤是我將包含代碼行包裝在中，這使所有內容弄亂了，所以我只是將其刪除。

新手問題...

Answer 1

看來您正在嘗試建立響應式網站...嘗試使用以下滑塊：

http://www.woothemes.com/flexslider/

它易於使用且響應迅速。