javascript - Jquery间隔播放div中的视频或图片

Question

我有一个 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);    
   }

}

Answer 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>