2010-09-19 7 views
0

Je me demandais si quelqu'un pouvait m'aider .. J'ai regardé partout pour un scroller qui correspond à mes besoins. Je veux être capable de faire un défilement qui défile continuellement vers la gauche et la droite, aussi longtemps que le bouton gauche ou droit est maintenu enfoncé (en utilisant onmousedown).Jquery SerialScroll: continu à la fois gauche et droite

SerialScroll est le plus proche changeurs mon widh .. Cependant, mes essais n'ont pas été avec succès .. XD

Ariel Flesler (créateur si SerialScroll), a écrit un post sur son blog à propos "Doctorate on Jquery.SerialScroll", où il décrit comment faire un défilement continu et comment faire défiler de gauche à droite. Cependant, il n'a pas décrit comment combiner les deux ..

Quelqu'un pourrait m'aider s'il vous plaît? Meilleures salutations, Anders

Répondre

0

SerialScroll est une douleur dans le cul, donc je fait quelque chose de rapide pour vous, je failli écrire un code qui fonctionne pour serialScroll, mais j'ai eu quelques difficultés à changer la direction de défilement avec serialscrolling.

<html> 
<head> 
<script type='text/javascript' src='jquery.js'></script> 
<style> 
li{ 
    list-style:none outside none; 
    float:left; 
} 
</style> 
</head> 
<body> 
<div style="width:500px;"> 
    <div id="buttons"> 
    <a class="prev" href="#" onmousedown="previous();start()" onmouseup="stop()">Previous</a> 
    <a class="next" href="#" onmousedown="next();start()" onmouseup="stop()">Next</a> 
    <br class="clear" /> 
    </div> 
    <div id="pane" style="overflow:hidden;"> 
    <ul style="width:2000px"> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    <li><img src="https://mail.google.com/mail/help/images/logo2.gif" /></li> 
    </ul> 
    </div> 
</div> 

<script> 

interval=20; 
speed=3; 
change = 1; 
handleTimeOut = null; 

function next(){ 
change = 1; 
} 


function previous(){ 
change = -1; 
} 

function start(){ 
handleTimeOut =setTimeout(function(){timeout()},interval); 
} 

function stop(){ 
clearTimeout(handleTimeOut); 
} 

function timeout() { 
$('#pane')[0].scrollLeft += speed*change; 
start(); 
} 

</script> 
</body> 
+0

Hey! Merci! Il semble bien fonctionner, mais lors du test dans Safari & IE sous Windows, le scroller est _really_ slow .. vous savez comment résoudre ce problème ...? En plus cela fonctionne très bien! ; D – guzh

+0

SerialScroll sera lent sur Safari et c'est à dire sur votre fenêtre, Il existe d'autres solutions pour le rendre plus rapide dans Safari ou IE, mais l'impact est qu'il ne sera pas aussi lisse lors de l'exécution sur un autre navigateur. Si vous voulez, je peux en créer un rapidement. Désolé pour le long délai je n'utilise pas stackoverflow, seul le temps où je suis ici est quand je cherche quelque chose – citium

Questions connexes