2010-12-08 10 views
0

Ich benutze dieses jQuery-Plugin: http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm, um ein vertikales Karussell zu erstellen.jQuery Carousel Plugin zum ersten Element auf klicken scrollen

Ich möchte etwas ähnliches wie die Seitenumbruch tun, wo eine Schaltfläche angeklickt wird und der entsprechende Rahmen gescrollt wird. Aber ich will nur einen Knopf. Diese Schaltfläche wird nach dem letzten Bild angezeigt und lautet "zurück nach oben". Wenn Sie darauf klicken, wird zum ersten Element im Karussell gescrollt. Wer weiß, wie ich dieses Ereignis leicht auslösen kann?

+0

Es ist eine Schande, dass Sie dieses Plugin ausgewählt haben. Ich hätte es aus zwei Gründen vermieden: keine Dokumentation außer der Einrichtung, und es gibt keine Verbindung zur unkomprimierten Quelle. –

Antwort

0

Ich glaube, Sie das jquery scrollTo Plugin wollen: http://demos.flesler.com/jquery/localScroll/#section1

Der Link zum Download das Plugin auf der rechten Seite dieser Seite.

+0

Danke, aber ich brauche kein Plugin nur dafür. Die Funktionalität, die es dort gibt, muss ich finden, wie ich es auslösen kann. –

2

Ich schrieb folgendes, was ich denke, was Sie erreichen wollen.

<html> 
<head> 
    <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" /> 


    <script type="text/javascript"> 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel(
    { 
     vertical: true, 
     scroll: 1 
    }); 

    // Loop through all images and attach click action 
    jQuery("#mycarousel img").each(function(index, element) 
    { 
     $(element).click(function() 
     { 
      jQuery('#mycarousel').jcarousel('scroll', index + 1); 
     }); 
    }); 
}); 

</script> 
</head> 

<body> 

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango"> 
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> 
</ul> 
</body> 
</html> 
+0

Hat mir geholfen mit dem, was ich tun musste +1 – AdRock