根据数组中时间播放图片

写法一、
<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 @ 2021-11-23 10:00  蓝色精灵jah  阅读(45)  评论(0)    收藏  举报