关于定时器的图片轮播图

<!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>

阅读 3.9k

关于定时器的图片轮播图

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？