根据数组中时间播放图片
写法一、
<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>
