登录  /  注册
首页 > web前端 > js教程 > 正文

js用定时器实现无缝滚动效果(代码实现)

不言
发布: 2018-08-16 14:39:36
原创
2035人浏览过

本篇文章给大家带来的内容是关于js用定时器实现无缝滚动效果(代码实现),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

最近学习定时器的相关知识,整理定时器实现无缝滚动的效果。

原理

  • 用定时器实现ul滚动。

  • 当滚动超过ul总长度的二分之一时(即oUl.offsetLeft

  • 当ul左边距离大于0的时候,将left切换到总长度的一般(即oUl.style.left=-oUl.offsetWidth/2+"px")。

  • 向左滚动的时候-2

  • 向右滚动的时候+2

3538399596-5b74f6b722c20_articlex.png

代码实现

nbsp;html>


  <meta>
  <title>定时器实现无缝滚动例子</title><style>
  * {
    margin: 0;
    padding: 0;
  }
  #div1 {
    width: 700px;/* 按照显示四张图片计算宽度 */
    height: 117px;
    margin: 20px auto;/* 页面居中 */
    position: relative;
    overflow: hidden;/* 超出部分隐藏 */
  }
  #div1 ul{
    position: absolute;
    left: 0;
    top: 0;
  }
  #div1 ul li{
    float: left;
    width: 175px;
    height: 117px;
    list-style-type: none;
  }
</style><script>
  window.onload=function(){
    var oDiv=document.getElementById("div1");//获取div1元素
    var oUl=oDiv.getElementsByTagName("ul")[0];//获取ul元素
    var oLi=oUl.getElementsByTagName("li");//获取li元素
    var oLeft=document.getElementById("moveleft");//获取向左滚动元素
    var oRight=document.getElementById("moveright");//获取向右滚动元素
    oUl.innerHTML+=oUl.innerHTML;//把ul中li元素重复拼接一次
    var speed=-2;//设置左滚动和右滚动,如果为负值为左滚动正值为右滚动
    oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";//设置ul宽度为li宽度总和
    function move(){//定时器中的方法独立出来
      if(oUl.offsetLeft<-oUl.offsetWidth/2){//左移,当ul左侧的距离小于总距离的一半时就把ul的left设置为0,因为是负值所以加-
        oUl.style.left="0";
      }
      if(oUl.offsetLeft>0){//右移,当ul左侧的距离大于0时,把ul的left设置为ul总宽度的一半,加-
        oUl.style.left=-oUl.offsetWidth/2+"px";
      }
      oUl.style.left=oUl.offsetLeft+speed+"px";//不符合上述两个要求的时候就直接滚动
    }
    var timer=setInterval(move,30);//设置定时器

    oDiv.onmouseover=function(){//当鼠标划到div1时清除定时器
      clearInterval(timer);
    }
    oDiv.onmouseout=function(){//当鼠标移除div1时重新开启定时器
      timer=setInterval(move,30);
    }

    oLeft.onclick=function(){//当点击向左滚动按钮时,设置为2
      speed=-2;
    }

    oRight.onclick=function(){//当点击向右滚动按钮时,设置为-2
      speed=2;
    }
  }
</script>
  <a>向左滚动</a>
  <a>向右滚动</a>
  <div>
    <ul>
      <li><img  alt="js用定时器实现无缝滚动效果(代码实现)" ></li>
      <li><img  alt="js用定时器实现无缝滚动效果(代码实现)" ></li>
      <li><img  alt="js用定时器实现无缝滚动效果(代码实现)" ></li>
      <li><img  alt="js用定时器实现无缝滚动效果(代码实现)" ></li>
    </ul>
  </div>


登录后复制

相关推荐:

JS的闭包与定时器

JS实现定时器+提示框

js如何使用定时器实现倒计时功能

以上就是js用定时器实现无缝滚动效果(代码实现)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号