js学使用setTimeout实现轮循动画
本文实例为大家分享了setTimeout实现轮循动画的具体代码，供大家参考，具体内容如下
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='box'></div>
<script>
var oBox = document.getElementById("box");
var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;
var step = 5;
var timer = null;
//使用递归思想完成setTimeout的轮循动画：每一次在执行动画之前把上一次设置没用的定时器清除掉，节约我们的内存空间
function move(){
window.clearTimeout(timer);
var curLeft = utils.css(oBox,"left");
if(curLeft+step >= maxLeft){//边界判断
utils.css(oBox,"left",maxLeft);
return;
}
curLeft+=step;
utils.css(oBox,"left",curLeft);
timer = window.setTimeout(move,10)
}
move();
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍js实现图片无缝循环轮播，包括了js实现图片无缝循环轮播的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现图片无缝循环轮播的具体代码，供大家参考，具体内容如下 代码如下 更多关于轮播图效果的专题，请点击下方链接查看学习 javascript图片轮播效果汇总 jquery图片轮播效果汇总 Bootstrap轮播特效汇总 以上就是本文的全部内容，希望对大家的学习有所帮
-
本文向大家介绍js实现自动轮换选项卡，包括了js实现自动轮换选项卡的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js自动轮换选项卡的具体代码，供大家参考，具体内容如下 效果图： 代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍无限循环轮播图之运动框架(原生JS实现)，包括了无限循环轮播图之运动框架(原生JS实现)的使用技巧和注意事项，需要的朋友参考一下 封装运动框架 以上这篇无限循环轮播图之运动框架(原生JS实现)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍Android使用ViewPager实现自动轮播，包括了Android使用ViewPager实现自动轮播的使用技巧和注意事项，需要的朋友参考一下 很多APP中都实现了类似引导页的自动轮播，不由得想到昨天的引导页上修改一下代码实现轮播。 其实大体上只需要添加一个线程循环执行就可以了。 项目已同步至：https://github.com/nanchen2251/viewpagerDem
-
本文向大家介绍原生JS实现匀速图片轮播动画，包括了原生JS实现匀速图片轮播动画的使用技巧和注意事项，需要的朋友参考一下 JS实现轮播图实现结果图： 需求： 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片，定时轮播图片；鼠标在图片上时暂停 4 左右两侧可点击轮播图片 一、布局部分 html部分 css部分 JS部分 1这是匀速动画函数的封装 轮播图封装函数： 精
-
本文向大家介绍原生js实现无限循环轮播图效果，包括了原生js实现无限循环轮播图效果的使用技巧和注意事项，需要的朋友参考一下 知识要点 1.实现无限循环的原理： 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 2.当前图片轮播的圆点变色显示： 因为每次点击index+1 所以当前的index-1就是button的索引 3.实现动画滚动效果： 原理就是把每次的偏移量分为