根据数组中时间播放图片
写法一、
<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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库