当前位置：文江博客话题详情

Jquery SerialScroll：左右连续

发布于 2024-09-24 05:27:04 字数 491 浏览 8 评论 0原文

我想知道是否有人可以帮助我..我一直在寻找适合我需要的滚动器。我希望能够制作一个滚动条，只要按住左或右按钮（使用 onmousedown），就可以连续向左和向右滚动。

SerialScroll 是最接近我宽度的滚动条。但是，我的尝试并未成功。 XD

Ariel Flesler（SerialScroll 的创建者）在他的博客上写了一篇关于 “Jquery.SerialScroll 博士”，他在其中描述了如何制作连续滚动条，以及如何从左向右滚动。然而他没有描述如何将两者结合起来..

有人可以帮助我吗？此致，安德斯

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如歌彻婉言 2024-10-01 05:27:04

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>

SerialScroll is an pain in the ass, so I made something quick for you,
I almost wrote some code that work for serialScroll, but I had some trouble changing the direction of scrolling with 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 原文

~没有更多了~