简单图片轮播JavaScript代码

最新推荐文章于 2021-10-24 15:29:29 发布

原创最新推荐文章于 2021-10-24 15:29:29 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

笔记专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了使用JavaScript实现图片轮播动画的过程，包括初始化图片位置、设置图片移动速度及时间间隔，通过定时器控制图片自动滑动，以及当图片滑出视窗时的循环播放逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    /*中间显示框架*/
    var frameObj = document.getElementsByClassName("frame")[0];
    /*图片按钮*/
    var liObj = document.getElementsByTagName("li");
    /*循环给每一个图片初始化margin属性*/
    for (var i = 0; i < liObj.length; i++) {
        liObj[i].style.marginLeft = "0px";
    }
    /*设置暂停变量*/
    var a = 0;
    /*图片移动时间间隔函数*/
    setInterval(function () {
        /*提取第一张图片的margin属性*/
        var py = parseInt(liObj[0].style.marginLeft);
        // console.log(py);
        /*margin移动的速度，py变量*间隔函数100ms则是每张图片移动的时间*/
        py -= 23.1;
        /*将偏移变量设置给第一个图片*/
        liObj[0].style.marginLeft = py + "px";
        /*时间间隔变量，每100ms加1。*/
        a++;
        /*判断如果偏移量大于第一张图片的宽度，则执行if内的函数*/
        if (py < -231) {
            /*如果a对20取余==0则执行if内函数*/
            if (a % 20 == 0) {
                /*将第一张图片重新添加至最后*/
                frameObj.appendChild(liObj[0]);
                /*这个时候第二张图片变成第一张，然后将它的偏移设置为0px*/
                liObj[0].style.marginLeft = "0px";
                /*将原第一张添加至最后的图片的margin属性清除，归零*/
                liObj[liObj.length - 1].style.marginLeft = "0px";
            }
        }
    }, 100);
</script>