Jquery klicken, um für eine bestimmte Entfernung zu scrollen

Question

Ich habe eine horizontale Liste von Bildern in einem Div. Jedes Bild hat eine Breite von 60%. Ich möchte sie so anzeigen lassen, dass zu einem Zeitpunkt nur 3 Bilder sichtbar sein sollten. Der erste Teil sollte nur 20% des Bildes enthalten, der zweite sollte 60% (Vollständig) enthalten und der dritte sollte 20% des Bildes enthalten. Problem tritt auf, wenn ich dies für eine große Liste von Bildern implementieren möchte.

Also sagen wir, ich habe 5 Bilder, ich will, dass sie wie dieses erste Bild 20% sind, als zweites 60% und als drittes 20%. Wenn die nächste Schaltfläche geklickt wird, möchte ich, dass das zweite Bild 20% wird, das dritte Bild 60% (abgeschlossen) und das vierte Bild 20% Breite und so weiter.

Dies ist der Code, den ich mit

gekommen sind

<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> 

So etwas wie dieses

Answer 1

Für alle in Zukunft eine Lösung für diese suchen. Weitere Informationen finden sie auf dieser Seite 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");