自动切换图片，图片轮播，关闭轮播

最新推荐文章于 2023-11-09 13:09:36 发布

00菜鸡猿00

最新推荐文章于 2023-11-09 13:09:36 发布

阅读量847

点赞数 1

分类专栏：日常文章标签： js html javascript

本文链接：https://blog.csdn.net/weixin_49234845/article/details/118393100

版权

日常专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在3D渲染展示中实现图片自动轮播的方法。通过使用JavaScript设置定时器来切换显示不同的图片，实现了流畅的轮播效果。同时，文章提供了具体的代码示例，包括如何控制3D旋转箭头的显示与隐藏，以及如何在特定操作下启动或停止轮播。

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

自动切换图片，图片轮播，关闭轮播

唠嗑

今天有一个需求，需要将原有流程的3D渲染展示增加一个功能，自动轮流播放，由于此功能是轮流显示某一张图片，我一开始就想到了设置一个定时器切换图片显示，然后我根据我这么久的开发经验告诉我，应该去看看渲染插件(KeyShotXR)有没有相应的功能，那样完成更快。结果没有，就写一个定时器切换图片吧！

视频展示

视频链接: 点我点我点我

代码



   		//控制3D旋转的箭头，隐藏
        $(".timeline .swiper-wrapper").mousedown(function () {
            $("#quanjingicon").css("opacity", "0")
            window.clearInterval(t2);       //关闭定时器
        })
        //控制3D旋转的箭头，显示
        $(".timeline .swiper-wrapper").mouseup(function () {
            $("#quanjingicon").css("opacity", "0.2")
            t2 = window.setInterval("automaticRotation()",100);     //打开定时器
        })


        // ----------------------- 打开3D之后自动旋转 start  ----------------------------

        var Rotation = 0;   //当前图片

        automaticRotation = function (){
            var img = document.getElementById("backbuffer");
            Rotation = img.src.split("401/0_")[1].split(".png")[0]; //获取当前图片
            ++Rotation; //在当前图片名字加1
            if (Rotation > 35){     //轮播图片共35张，大于35自动重新加载
                Rotation = 0;
            }

            img.src = "${(domainUrlUtil.EJS_IMAGE_RESOURCES)!}/images/rendering/401/0_"+Rotation+".png";    //更改图片

        }

        var t2 ;    //定时器

        //查看3D渲染图
        $("#product_img_show_button_img_3D").click(function (){
            t2 = window.setInterval("automaticRotation()",100);    //打开定时器
        })
        //当点击其他按钮（不查看3D渲染图）
        $(".product_img_show_button_div .product_img_show_button_img").click(function (){
            window.clearInterval(t2);   //关闭定时器
        })



        // ----------------------- 打开3D之后自动旋转 end  ----------------------------