无缝滚动

最新推荐文章于 2023-04-27 15:57:32 发布

Uyi婷

最新推荐文章于 2023-04-27 15:57:32 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/yutin781528452/article/details/81588424

版权

让物体运动起来：

offsetLeft是物体的左边距

实例：

做一个横向的滚动条，让其往左边滚动，

，

先设好基本样式，特别注意div1和ul的绝对定位和相对定位，如果div不设置相对定位，那么ul的滚动条就会以整个页面为相对位置，在left:0和top:0的位置进行滚动，也就是页面左上角，（本来是页面中间）

如果ul不设置绝对定位或者设置在li上，那么都不会滚动。

但是这样写好之后出现了如下的问题：

四张图片不会轮回滚动，图片滚过之后，剩下的背景就变成了背景色了。

想要让四张图片反复的滚动，就要在第四张图片之后接上第一张图片

那就加上这句代码：，

innerHTML就是指div中的li，这样子虽然可以让他第四张之后接上第一张图片，但是仍然只能轮回两次，而且会出现这样的效果，因为ul的宽度不够8张图片。

添加如下的代码，就可以让图片在一行里显示了。

注意顺序不能写错!

上面说到，让四张图片反复滚动的代码不靠谱，因为不管+多少次，总有滚到尽头的时候。

仔细想想，当四张图片滚完之后，后四张图片仍然是和前四张一模一样的，那我们可以用最快的方法，当前四张图片滚完，后四张图片全部出现时，将前四张图片迅速拉回来，

代码如下：

当然不能让用户看到八张图片，每次只能看到四张，所以要在div1中设一下：

也就是溢出的部分隐藏。

无缝滚动——扩展

以上写的是向左滚，但是有的页面可以让用户自动选择向右滚还是向左滚，如果向右滚的话，改成：，但是这样又会出现左边有红色背景的问题了。

加入如下代码就OK了。

在实际情况中，当用户把鼠标移到滚动条上时，说明要读取里面的内容，应该让滚动条停止。

，当鼠标移出滚动条时，要在function中加入setInterval中一模一样的代码，即

，这样重复了两个一模一样的代码，显得特别的繁冗，所以就把定时器里的这段代码单独取一个名字move

然后把定时器的这段代码放入onmouseout中就全部完成了。

接下来再拓展一个功能，点击向左按键就向左滚动。

先设两个超链接:：

注意href中的javascript：；一定要写

再定义一个speed ,还要把这行代码中原本是10改成speed

然后再加入如下代码就完成了。

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
   *{
       margin: 0;
       padding:0;
   }
   #div1{
       position: relative;
       width: 712px;
       height: 108px;
       margin: 100px auto;
       /*background: red;*/
       overflow: hidden;
   }
   #div1 ul{
       position: absolute;
       left: 0;
       top: 0;
   }
   #div1 ul li{
       float: left;
       list-style: none;
       width: 178px;
       height: 108px;
   }
</style>
</head>
<script>
window.οnlοad=function(){
   var oDiv=document.getElementById('div1');
   var oUl=oDiv.getElementsByTagName('ul')[0];
   var aLi=oUl.getElementsByTagName('li');
   var speed=10;
   oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
   oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

   function move(){
       if(oUl.offsetLeft<-oUl.offsetWidth/2){ //因为第一个offsetLeft可能是负数，所以要加一个负号
           oUl.style.left='0';
       }
       if (oUl.offsetLeft>0) {
           oUl.style.left=-oUl.offsetWidth/2+'px';
       }
       oUl.style.left=oUl.offsetLeft+speed+'px';
   }
   var timer=setInterval(move,100);

   oDiv.οnmοuseοver=function(){
       clearInterval(timer);
   }
   oDiv.οnmοuseοut=function(){
       timer=setInterval(move,100);
   }
   document.getElementsByTagName('a')[0].οnclick=function(){
       speed=-10;
   }
   document.getElementsByTagName('a')[1].οnclick=function(){
       speed=10;
   }
}
</script>
<body>
   <a href="javascript:;">向左走</a>
   <a href="javascript:;">向右走</a>
   <div id="div1">
       <ul>
           <li><img src="img/1.jpg"></li>
           <li><img src="img/2.jpg"></li>
           <li><img src="img/3.jpg"></li>
           <li><img src="img/4.jpg"></li>
       </ul>
   </div>
</body>
</html>

Uyi婷

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动

让物体运动起来：offsetLeft是物体的左边距实例：做一个横向的滚动条，让其往左边滚动，，先设好基本样式，特别注意div1和ul的绝对定位和相对定位，如果div不设置相对定位，那么ul的滚动条就会以整个页面为相对位置，在left:0和top:0的位置进行滚动，也就是页面左上角，（本来是页面中间）如果ul不设置绝对定位或者设置在li上，那么都不会滚动。但...
复制链接

扫一扫