横向滚动

最新推荐文章于 2024-08-06 09:15:35 发布

peswe

最新推荐文章于 2024-08-06 09:15:35 发布

阅读量558

点赞数

分类专栏： Javascript 文章标签： scroll function button float html input

本文链接：https://blog.csdn.net/peswe/article/details/4491515

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在网上看到一个横向滚动的效果，看别人的代码写得比较好，但是有些看不懂，所以就自己写个类似的功能

先总结下，有时间再去研究别人的代码

主要原理：

将原有的内容复制一份，并控制好滚动时，方块的位置，以达到无缝滚动的效果

在界面中实际有20个方块，

方块1，方块2......方块19 ，方块20

经过复制后，就有40个方块了

方块1 ，方块2......方块19 ，方块20 ，方块1，方块2......方块19，方块20

将每4个方块组成一组，每组600px；但只设定总长度为3600px,所以实际只能显示的方块为：

方块1 ，方块2......方块19 ，方块20 ，方块1，方块2，方块3，方块4

通过控制层的scrollLeft来控制所有方块的位置

1、当向右滚动时，如果scrollLeft大于或等于2400，也就是滚动到以下位置：

方块17 ，方块18 ，方块19 ，方块20 ，方块1，方块2，方块3，方块4

此时并不判断，而是让层继续滚动，当滚动到3000时才进行判断，如果大于或等于3000，便将层归0：

这样才可以达到无缝的效果

if(time<=12){ $('scroll').scrollLeft += 50 setTimeout(function(){sr(time+1)},100); return } if($('scroll').scrollLeft >= 3000){$('scroll').scrollLeft = 0;return}

归0后方块的排列为：

方块1，方块2，方块3，方块4，方块5 ，方块6，方块7 ，方块8

这样，层就可以继续向右滚动了；

2、层向左滚动

当scrollLeft 为0时，方块的排列为：

方块1，方块2，方块3，方块4，方块5 ，方块6，方块7 ，方块8

此时，需要先将scrollLeft重新定位为：3000，才可以继续向左滚动

方块17 ，方块18，方块19 ，方块20，（定位位置3000）方块1，方块2，方块3，方块4

if($('scroll').scrollLeft <= 0){$('scroll').scrollLeft = 3000} if(time<=12){ $('scroll').scrollLeft -= 50 setTimeout(function(){sl(time+1)},100); }

完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 左右横向无缝滚动 </TITLE>
<style type="text/css">
#scroll{width:600px;height:250px;overflow:hidden}
.mqdemoa {width:3600px;margin:0;padding:0;}
.mqdemoa li {width:148px;margin:0 1px;height:250px;background:red;float:left;list-style:none;}
#prenext {width:600px;height:20px;overflow:hidden;}
#prenext span {display:block;font:12px "宋体";width:50%;height:20px;line-height:20px;text-align:center;cursor:pointer;color:#fff;background:#000;}
#prenext .pre {float:left;}
#prenext .next {float:right;}
</style>

</HEAD>

<BODY>
<div id="scroll">
<ul id="scroll2" class="mqdemoa">
<li>方块1</li>
<li>方块2</li>
<li>方块3</li>
<li>方块4</li>
<li>方块5</li>
<li>方块6</li>
<li>方块7</li>
<li>方块8</li>
<li>方块9</li>
<li>方块10</li>
<li>方块11</li>
<li>方块12</li>
<li>方块13</li>
<li>方块14</li>
<li>方块15</li>
<li>方块16</li>
<li>方块17</li>
<li>方块18</li>
<li>方块19</li>
<li>方块20</li>
</ul>
</div>
<div id="test">
this is a test
</div>
<input type="button" name="scrollleft" value="scrollLeft" id="scrollleft">
<input type="button" name="scrollright" value="scrollRight" id="scrollright">
<script>
var $ = function(id){return document.getElementById(id)}
$('scroll2').innerHTML = [$('scroll2').innerHTML,$('scroll2').innerHTML].join("")
var ScrollWidth = Math.ceil($('scroll2').scrollWidth/2)

$('scrollright').onclick = function sr(time){
if(arguments.length==0||typeof arguments[0]!='number'){time = 1;};
$('test').innerHTML = [$('scroll').scrollLeft,$('scroll').scrollWidth].join(',')

if(time<=12){
  $('scroll').scrollLeft += 50
  setTimeout(function(){sr(time+1)},100);
  return
}
if($('scroll').scrollLeft >= 3000){$('scroll').scrollLeft = 0;return}
}

$('scrollleft').onclick = function sl(time){
if(arguments.length==0||typeof arguments[0]!='number'){time = 1;};
$('test').innerHTML = $('scroll').scrollLeft + ',' +$('scroll').scrollWidth
if($('scroll').scrollLeft <= 0){$('scroll').scrollLeft = 3000}
if(time<=12){
$('scroll').scrollLeft -= 50
setTimeout(function(){sl(time+1)},100);
}
}
</script>
</BODY>
</HTML>