javascript - 关于定时器的图片轮播图
本文介绍了javascript - 关于定时器的图片轮播图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 500px;
height: 300px;
border: 1px solid red;
margin: 100px 800px;
overflow: hidden;
position: relative;
}
#imgbox{
width: 2500px;
height: 300px;
position: absolute;
}
img{
width: 500px;
height: 300px;
float: left;
}
</style>
<script src='js/script.js'></script>
<script>
$(function(){
var box=$('imgbox');
var oImg=$('imgbox').getElementsByTagName('img');
var num=0;
var timer=setInterval(function(){
doMove(box,'left',20,-500*num);
num++;
if(parseInt(getStyle(box,'left'))==-2000){//判断位置
//当移动到替换图的位置-2000时，将其设置为0；
//并将num值设置为1；
box.style.left=0+'px';
num=1;
}
//但是将图片轮播完一遍之后，第一张到第二张图片切换时候会出现左右移动，看不出逻辑上哪里出了问题。
},2000)
})
/*
当把判断放在回调函数里就变得正常了。
var timer=setInterval(function(){
doMove(box,'left',20,-500*num，function(){
num++;
if(parseInt(getStyle(box,'left'))==-2000){
box.style.left=0+'px';
num=1;
}
});
},2000)
*/
function $(obj){
if (typeof obj ==='function') {
window.onload=obj;
}else if(typeof obj === 'string'){
return document.getElementById(obj);
}else if(typeof obj ==='object'){
return obj;
}
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
function doMove(obj,attr,speed,target,endFn){
speed=parseInt(getStyle(obj,attr))<target?speed:-speed;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=parseInt(getStyle(obj,attr))+speed;
if(icur>target&&speed>0||icur<target&&speed<0){
icur=target;
}
obj.style[attr]=icur+'px';
if(icur==target){
clearInterval(obj.timer);
endFn&&endFn(); //短路与 当前者为true 执行后者
}
},50)
}
</script>
</head>
<body>
<div id="box">
<div id="imgbox">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
</div>
</body>
</html>解决方案
异步的问题
你doMove()里的定时器执行同时num++直接往下执行,然后判断,这时候你定时器可能还没动，if()就执行了
这篇关于javascript - 关于定时器的图片轮播图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
