妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 1456|回复: 5

[求助] 求助关于无缝滚动遇到的问题

[复制链接]
明哲 发表于 2016-5-25 18:07:46 | 显示全部楼层 |阅读模式
就是那个速的问题,OUL移动到它宽度的一半的时候,当给它拉回来的时候,为什么它会卡顿一下,这样的问题怎么解决啊?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0px;margin:0px;}
#div1{height:100px;width:400px;margin:20px auto;position:relative;overflow:hidden;background:red;}
#ul1{position:absolute;left:0px;top:0px;}
li{float:left;list-style:none;}
img{width:100px;}
</style>
</head>

<body>
<div id='div1'>
<ul id='ul1'>
    <li> <img src="1.png"></li>
    <li> <img src="2.png"></li>
    <li> <img src="3.png"></li>
    <li> <img src="4.png"></li>
</ul>
</div>
</body>
<script>
window.onload=function(){
        var oDiv=document.getElementById("div1");
        var oUl=oDiv.getElementsByTagName('ul')[0];
        var aLi=oUl.getElementsByTagName('li');
        var time=50;
        oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
        oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'
        function auto(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                        oUl.style.left=0;
                }
                oUl.style.left=oUl.offsetLeft-2+'px';
        }
        setInterval(auto,time)
}
</script>
</html>
回复

使用道具 举报

motao 发表于 2016-5-26 18:06:10 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. *{padding:0px;margin:0px;}
  8. #div1{height:100px;width:400px;margin:20px auto;position:relative;overflow:hidden;background:red;}
  9. #ul1{position:absolute;left:0px;top:0px;}
  10. li{float:left;list-style:none;width:100px;}
  11. img{width:100px;}
  12. </style>
  13. </head>

  14. <body>
  15. <div id='div1'>
  16. <ul id='ul1'>
  17.     <li> 1</li>
  18.     <li> 2</li>
  19.     <li> 3</li>
  20.     <li> 4</li>
  21. </ul>
  22. </div>
  23. </body>
  24. <script>
  25. window.onload=function(){
  26.         var oDiv=document.getElementById("div1");
  27.         var oUl=oDiv.getElementsByTagName('ul')[0];
  28.         var aLi=oUl.getElementsByTagName('li');
  29.         var time=20;
  30.         oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
  31.         oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'
  32.         function auto(){
  33.                 if(oUl.offsetLeft<-oUl.offsetWidth/2){
  34.                         oUl.style.left=0;
  35.                 }
  36.                 oUl.style.left=oUl.offsetLeft-1+'px';
  37.         }
  38.         setInterval(auto,time)
  39. }
  40. </script>
  41. </html>
复制代码
看了你的问题 ,没有发现你说的情况啊
回复 支持 反对

使用道具 举报

christal 发表于 2016-7-1 14:24:12 | 显示全部楼层
请问你的问题解决了吗?我是按照视频写的,也出现了一样的问题……
回复 支持 反对

使用道具 举报

 楼主| 明哲 发表于 2016-7-13 21:44:10 | 显示全部楼层
christal 发表于 2016-7-1 14:24
请问你的问题解决了吗?我是按照视频写的,也出现了一样的问题……

好久没有来,妙味了,呵呵。不好意思,我才看到,你想一下,当超出的部分,是多少,然后你可以把相应的值也加上,比如超出了,10PX,你就加上10PX;你试一试看看。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 15:37 , Processed in 0.129769 second(s), 21 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表