CSS保持中間圖像中100％的寬度幻燈片始終處於中心

Question

我試着才達到的幻燈片，看起來像這樣

http://ge.tt/api/1/files/2AjKcVM/0/blob/x675?noinc=1

其中寬度爲100％，並不斷滾動無限向左或向右，但無論瀏覽器分辨率如何，始終在中心存在圖像。這是香港專業教育學院得到了迄今爲​​止

http://fourcreeklandscape.com/index2.html

幻燈片圖像具有800像素的寬度，最左邊的圖像具有利潤率左-25％...這八九不離十看起來它工作在1280px屏幕大小....但看起來不像它的假設當我調整窗口大小。

繼承人使用

$(document).ready(function() { 
    //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item. 
    $('#carousel_ul li:first').before($('#carousel_ul li:last')); 


    //when user clicks the image for sliding right   
    $('#right_scroll img').click(function(){ 

     //get the width of the items (i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too) ' 
     var item_width = $('#carousel_ul li').outerWidth() + 10; 

     //calculae the new left indent of the unordered list 
     var left_indent = parseInt($('#carousel_ul').css('left')) - item_width; 

     //make the sliding effect using jquery's anumate function ' 
     $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){  

      //get the first list item and put it after the last list item (that's how the infinite effects is made) ' 
      $('#carousel_ul li:last').after($('#carousel_ul li:first')); 

      //and get the left indent to the default -210px 
      $('#carousel_ul').css({'left' : '-210px'}); 
     }); 
    }); 

    //when user clicks the image for sliding left 
    $('#left_scroll img').click(function(){ 

     var item_width = $('#carousel_ul li').outerWidth() + 10; 

     /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */ 
     var left_indent = parseInt($('#carousel_ul').css('left')) + item_width; 

     $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){  

     /* when sliding to left we are moving the last item before the first list item */    
     $('#carousel_ul li:first').before($('#carousel_ul li:last')); 

     /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */ 
     $('#carousel_ul').css({'left' : '-210px'}); 
     }); 


    });}); 

任何想法的幻燈片代碼IM？感謝

Answer 1

你可以把#carousel_ul

left: 50%; 
margin-left: -1200px; 

這個CSS只要確保它去左到右。唯一的問題是，如果某人的顯示器比2000像素更寬，當幻燈片放映第一次開始時，他們會在左側看到一些圖像，但我認爲這是很少的人。