我有一个jQuery数组。我想要做的是获取图像或视频并播放它直到指定的间隔,然后播放下一个视频或图像:
这是我的代码:
var side_block_src= [{media:'images/172422009.jpg',interval:10},
{media:'images/172422001.jpg',interval:50},
{media:'images/172422009.jpg',interval:4}
];
var sec = 0;
for(var i = 0; i < side_block_src.length; i++) {
console.log('start');
sec = side_block_src[side_block_src].interval*1000;
setTimeout(function(){
$('#setdata>iframe').attr('src',side_block_src[side_block_src].media);
},sec);
}
为什么不起作用?
更新 我在这里更简单的是工作代码
var i = 0;
show_next(i);
function show_next(i){
if(i <= side_block_src.length - i ){
$('#setdata>iframe').attr('src',side_block_src[i+1].media);
setTimeout(function(){
show_next(i + 1)
}, side_block_src[i+1].interval * 1000);
} else {
i=0;
show_next(i);
}
}
答案 0 :(得分:1)
你可以使用 anything slider jquery plugin对于此,我使用了
<script type="text/javascript" src="js/ad/jquery.anythingslider.js"></script>
<script type="text/javascript" src="js/ad/jquery.anythingslider.fx.js"></script>
<script type="text/javascript" src="js/ad/jquery.easing.1.2.js"></script>
$('#slider').anythingSlider({
autoPlay: true,
animationTime: 600,
//expand : true,
// Autoplay video in initial panel, if one exists
onInitialized: function(e, slider) {
playvid(slider);
},
// pause video when out of view
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof(vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
// play video
onSlideComplete: function(slider) {
playvid(slider);
},
// pause slideshow if video is playing
isVideoPlaying: function(slider) {
var vid = slider.$currentPage.find('video');
return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
}
});
这里是html代码
<ul id="slider">
<li class="panel5">
<video class="Cmsvideo" controls autoplay>
<source src="PATH_OF_VIDEO" type="video/EXTENTION_OF_VIDEO" >
Your browser does not support the video tag. But you could include an iframe/embeded video here. </video>
</li>
<li><img src="PATH_OF_IMAGE" alt="" /></li>
</ul>
答案 1 :(得分:0)
这是我的解决方案:
var i = -1;
showNext(i);
function showNext(i) {
if (side_block_src.length - i > 1) {
$('#setdata>iframe').attr('src',side_block_src[i+1].media);
setTimeout(function()
{
showNext(i + 1)
}, side_block_src[i + 1].interval * 1000);
}
}