如何使用 javascript 使幻灯片重复播放答案

【问题标题】：how to make a slideshow repeat using javascript如何使用 javascript 使幻灯片重复播放
【发布时间】：2013-08-07 00:17:53
【问题描述】：

好的，我的幻灯片是我的身体背景，imgs 在这样的 img 标签中

 <img name="pic" src="../../Content/images/bg.jpg" style="  width: 100%; position: absolute; top: 0; left: 0; z-index: -1;width: expression(document.body.clientWidth + 'px');   " alt=""/>

我的问题是它播放但在最后一张图像上停止而不是连续

另外我将如何实现一个停止播放 prev next 按钮一个也控制背景的页面顶部如果可能，我不想下载任何插件谢谢

这是我目前的代码

  var pause = 3000;

var n = 0;

var imgs = new Array("bg.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg", "bg7.jpg", "bg8.jpg", "bg9.jpg", "bg10.jpg", "bg11.jpg");


var preload = new Array();
for (var i = 1; i < imgs.length; i++ ) {
    preload[i] = new Image();
    preload[i].src = imgs[i];
}

var inc = -1

function rotate() {

    document.images.pic.src = imgs[n];
    (n == (imgs.length - 1)) ? n = 0 : n++;
    setTimeout("rotate(0)", pause);
}

【问题讨论】：

标签： javascript slideshow

【解决方案1】：

可能是这个？

n = ( n==imgs.length-1 ? 0 : n+1);

【讨论】：

当我使用它时，萤火虫说丢失）仍然不起作用
您可以尝试将其重新排列为 if/else... "if(n==imgs.length-1) n=0 else n++;"

【解决方案2】：

尝试像这样构建您的代码：

var i, imgs, pic;

function rotate()
{
  pic.src = imgs[i] ;
  (i === (imgs.length -1) ) ? i=0 : i++ ;
  setTimeout( rotate, 5000 ); 
}

function init()
{
  pic = document.getElementById("pic");

  imgs = ["bg.jpg", "bg2.jpg", "bg3.jpg"] ;

  var preload= new Array();
  for( i=0; i< imgs.length; i++ )
  {
    preload[ i ] = new Image();
    preload[ i ].src = imgs[ i ];
  }

  i=0;

  rotate();
}
onload=init;

在你的 html 页面中你可以有这样的东西：

<img id="pic" width="960" height="300" alt="Icon" src="bg1.jpg">

【讨论】：