jquery點擊滾動一個特定的距離

Question

我有一個div的圖像水平列表。每張圖片的寬度均爲60％。我想像這樣顯示它們，一次只能看到3張圖像，第一部分應該只包含20％的圖像，第二部分應該包含60％（完整），第三部分應該包含20％的圖像。問題出現時，我想實現這一大型圖像列表。

所以我們說我有5張圖片，我希望他們能像這樣第一張圖片是20％，第二張是60％，第三張是20％。當點擊下一個按鈕時，我希望第二個圖像變爲20％，第三個圖像爲60％（完成），第四個圖像爲20％寬度，依此類推。

這是我想出了

<div class="center" id="content"> 

      <!--First Image 20%by default--><div id="internal-cover" class="internal" style="width:20%"></div> 

      <!--Second Image--><div id="internal" class="internal"></div> 

    <!--Third Image--><div id="internal" class="internal"></div> 
      <!--fourth Image--><div id="internal" class="internal"></div> 
        <!--Fifth Image--><div id="internal" class="internal" ></div> 


    </div> 



      <style type="text/css"> 

      body 
      { 
      margin: 0px auto; 
      height: 100%; 
      width: 100%; 
      overflow: hidden; 
      } 
       /* Put your css in here */ 



      .internal{ 
      width: 60%; 
      height: 100%; 
      background-size:cover; 
      display: inline-block; 

      } 

      .center{ 
      float: left; 
      width: 100%; 
      height: 100vh; 
      overflow: hidden; 
      /*will change this to hidden later to deny scolling to user*/ 
      white-space: nowrap; 
      } 



      </style> 
      </body> 

      </html> 




      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 

      <script type="text/javascript"> 
      // Add your javascript here 


    var first =0; 
      var second = first+1; 
      var third= second+1; 
      var ctr=0; 
      $('#internal-cover').addClass("left-button"); 

      $(document).on("click",".right-button",function(){ 
       event.preventDefault(); 
       //resetSize(); 
       $('#content').animate({ 
       scrollLeft: "+=812px"//20%Left 60-40% = 60%of Width 

       }, "fast"); 
    console.log(
    $('.center').scrollLeft() 
      ); 
       first++; 
       second++; 
       third++;handleSet(); 
      }); 

      $(document).on("click",".left-button",function(){ 

       event.preventDefault(); 
       //resetSize(); 
       $('#content').animate({ 
       scrollLeft: "-=812px" 
       }, "fast"); 

       first--; 
       second--; 
       third--; 
       handleSet(); 

      }); 

      function resetSize() 
      { 
       $('.internal').each(function(){ 

         $(this).css("width","60%"); 

       }); 
      } 
      function handleSet() 
      { 

        console.log(first+"---"+second+"---"+third); 
        $('.internal').each(function(){ 

          $(this).removeClass("left-button"); 
          $(this).removeClass("right-button"); 

        }); 
        $('.internal'+first).addClass("left-button") 
        $('.internal'+third).addClass("right-button"); 
      } 



      </script> 

像這樣的事情

Answer 1

對於任何人在未來尋求解決這一代碼。請看看本頁https://gist.github.com/tim-reynolds/3019761

var out = $('.center'); //Outer Div containing all the child elements 
var tar = $('#internal-target')); //Identifier of the target element, theone 
           that needs to be centered. 
var x = out.width(); 
var y = tar.outerWidth(true); 
var z = tar.index(); 
var q = 0; 
var m = out.find('.internal'); 
//Just need to add up the width of all the elements before our target. 
for(var i = 0; i < z; i++){ 
    q+= $(m[i]).outerWidth(true); 
    } out.animate({ 
     scrollLeft: Math.max(0, q - (x - y)/2)+"px" 
     }, "fast");