Jquery SerialScroll: непрерывный как левый, так и правый - PullRequest
Новая
       48

Jquery SerialScroll: непрерывный как левый, так и правый

0 голосов
/ 19 сентября 2010

Мне было интересно, может ли кто-нибудь помочь мне ... Я искал скроллер, который соответствует моим потребностям.Я хочу иметь возможность создавать скроллер, который непрерывно прокручивает влево и вправо, пока нажата левая или правая кнопка (с помощью onmousedown).

SerialScroll - это скроллерБлижайшая моя жена ... Однако мои попытки не увенчались успехом .. XD

Ариэль Флезлер (создатель SerialScroll) написал в своем блоге сообщение о "Докторская степень по Jquery.SerialScroll", где он описывает, как сделать непрерывную прокрутку, и как прокрутить слева направо.Однако он не описал, как объединить два ..

Может ли кто-нибудь помочь мне?С наилучшими пожеланиями, Андерс

1 Ответ

0 голосов
/ 20 сентября 2010

SerialScroll - боль в заднице, поэтому я быстро что-то сделал для вас, Я почти написал некоторый код, который работает для serialScroll, но у меня возникли проблемы с изменением направления прокрутки с помощью 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>
...