根据数组中时间播放图片

写法一、
<body>
    <div class="js-img">
        <!--<img src="" >-->
    </div>

 

    <script>
        var thisJson = {
            "imgList": [
                { "order": 1, "src": "../res/ct/1.jpg", "time": "0.5" }, { "order": 2, "src": "../res/ct/2.jpg", "time": "0.5" }, { "order": 3, "src": "../res/ct/3.jpg", "time": "0.5" }, { "order": 4, "src": "../res/ct/4.jpg", "time": "0.5" }, { "order": 5, "src": "../res/ct/5.jpg", "time": "0.5" }, { "order": 6, "src": "../res/ct/6.jpg", "time": "0.5" },
                { "order": 7, "src": "../res/ct/6.jpg", "time": "1.5", "text": "腹壁凹陷" },
                { "order": 8, "src": "../res/ct/7.jpg", "time": "0.5" }, { "order": 9, "src": "../res/ct/8.jpg", "time": "0.5" }, { "order": 10, "src": "../res/ct/9.jpg", "time": "0.5" }, { "order": 11, "src": "../res/ct/10.jpg", "time": "0.5" }, { "order": 12, "src": "../res/ct/11.jpg", "time": "0.5" }, { "order": 13, "src": "../res/ct/12.jpg", "time": "0.5" },
                { "order": 14, "src": "../res/ct/12.jpg", "time": "1.5", "text": "腹壁膨隆" }
            ]
        }
        var imgHtml = ''
        $.each(thisJson.imgList, function (index, item) {
            imgHtml += '<div time=' + item.time + ' style="display: none">' + item.src + '</div>'
        })
        $(".js-img").append(imgHtml)
        var imgIndex = 0;
        var foolImgFun = function () {
            var time = parseFloat($(".js-img div").eq(imgIndex).attr("time"), 2) * 1000;
            $(".js-img div").eq(imgIndex).show()
            setTimeout(function () {
                $(".js-img div").eq(imgIndex).hide()
                imgIndex++;

 

                if (imgIndex > (thisJson.imgList.length - 1)) {
                    imgIndex = 0;
                }
                foolImgFun();
            }, time)
        }
        foolImgFun();
    </script>
</body>
写法二
  <script>
        var b = new Array(5000, 6000, 4000);
        $(function () {
            setSelectedItem(0);
        })
        var selectedIndex;
        var playID;
        function setSelectedItem(index) {
            selectedIndex = index;
            clearInterval(playID);
            //自动播放
            playID = setInterval(function () {
                var index = selectedIndex + 1;

                if (index > b.length - 1) {
                    index = 0;
                }
                console.log('b[index] ', b[index]);
                setSelectedItem(index);
            }, b[index]);
        }
    </script>
posted @   蓝色精灵jah  阅读(32)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示