jquery Trigger horizontale Scroll-Fluid dynamische Breite div, stoppen Ende/beggining, erhalten Breite Fenster

Ich nehme an, dies ist im Wesentlichen ein jquery Schieber ich nach bin, aber keiner der Ichs eine versucht haben (caroufredsel, elastislide, smoothdivscroll) tun genau das, was ich will und die meisten bieten zu viele zusätzliche Funktionen, die ich nicht brauche. Alles, was ich wirklich tun will, ist das horizontale Scrollen des Browsers über jquery auszulösen, so dass ich die Bildlaufleiste ausblenden und eine Schaltfläche verwenden kann, um die Bildlauffunktion auszulösen.

Anforderungen:
-A horizontal mit einer Breite von 100% ist also egal, die Fenstergröße des Browsers, die Bilder füllen von links nach rechts Kanten Scrollen div. (getan, siehe Link unten)

-Der Breite der Bilder variieren

-Trigger der linken oder rechten Bildlauf durch das durch eine eine Seite zu einem Zeitpunkt, wie <div id="scroll-left">scroll left</div> auf externe Steuer klicken.

-Use Lockerung

-Stop am Anfang oder Ende des div Scrollen (genau wie ein Scroll-Akte des Browsers)

jquery Trigger horizontale Scroll-Fluid dynamische Breite div, stoppen Ende/beggining, erhalten Breite Fenster

Was ich glaube zu geschehen hat, ist für jquery die aktuelle Breite des bekommen div oder das Browser-Fenster, um zu wissen, wie weit man scrollen kann, muss dann wissen, wann es anhalten soll.

Vielleicht ist es einfacher als das.

Ich habe ein grundlegendes Mock-up der horizontal scrollenden div vor jquery: HERE
Jede Hilfe, die mich in die richtige Richtung zeigt würde sehr geschätzt werden.

Quelle

2012-03-30 rod

Dies ist ein „Quick-n-dirty“ Beispiel, das ich kam mit:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Example</title> 
     <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
     <script type="text/javascript"> 
      var curPage = 0; 
      $(document).ready(function(){ 
       var div = $("#scrolldiv"); 
       div.scrollLeft(0); 

       $("#scroll-right").click(function(){ 
        var curPos = div.scrollLeft(); 
        var curImage = div.find("img:eq("+curPage+")"); 
        if (curImage) { 
         width = curImage.width(); 
         div.animate({scrollLeft: curPos+width}, 'slow'); 
        } 
        curPage = curPage + 1; 
       }); 

       $("#scroll-left").click(function(){ 
        var curPos = div.scrollLeft(); 
        curPage = curPage - 1; 
        var curImage = div.find("img:eq("+curPage+")"); 
        if (curImage) { 
         width = curImage.width(); 
         div.animate({scrollLeft: curPos-width}, 'slow'); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="scrolldiv" style="width:100%;height:490px;float:left;display:inline;white-space: nowrap;overflow:hidden"> 
      <img src="ukvogue2.jpg" width="693" heigh="458" /> 
      <img src="ukvogue2.jpg" width="193" heigh="458" /> 
      <img src="ukvogue2.jpg" width="693" heigh="458" /> 
      <img src="ukvogue2.jpg" width="493" heigh="458" /> 
      <img src="ukvogue2.jpg" width="593" heigh="458" /> 
      <img src="ukvogue2.jpg" width="393" heigh="458" /> 
      <img src="ukvogue2.jpg" width="293" heigh="458" /> 
     </div> 
     <a href="#" id="scroll-left">Left</a>&nbsp;|&nbsp; 
     <a href="#" id="scroll-right">Right</a> 
    </body> 
</html>

hoffe, dies wird Sie in die richtige Richtung zeigen.

Quelle

2012-03-30 02:18:03

Vielen Dank. Ich fügte hinzu, dass es nur beim ersten Scrollen funktioniert. Jedes weitere Scrollen in der gleichen Richtung (abhängig von der Größe der Witwe) erlaubt es nicht, den gesamten Zyklus zu beenden. Ich glaube, das liegt daran, dass die Scroll-Länge bei der Belastung vorherbestimmt ist und nicht berücksichtigt, was übrig ist, um zu scrollen, was in diesem Fall weniger als das erste ist. – rod

jquery Trigger horizontale Scroll-Fluid dynamische Breite div, stoppen Ende/beggining, erhalten Breite Fenster

Antwort

Verwandte Themen