如何循环显示一组图像？

我正在尝试制作一个横幅，使用JavaScript循环浏览3张图片。
每个图像在更改前应显示10秒钟。如何循环显示一组图像？

我写了一些代码，但它不工作。它停留在第一张图片上。图像不会随着我的需要而改变。

你能看到代码中的任何内容并指出我的错误吗？

代码如下：

<script type="text/javascript"> 
    function changeBanner(){ 
     var img = new array 

     img[0] = document.images[0].src 
     img[1] = document.images[1].src 
     img[2] = document.images[2].src 

     var currentimg = img[0] 

     if(currentimg == img[0]) { 
      currentimg = img[1] 
     } 

     if(currentimg == img[1]) { 
      currentimg = img[2] 
     } 
    } 
</script>

HTML如下：

<body onload="var start=setInterval('changeBanner()', 10000;"> 
    <div id="wrapper"> 
     <div> 
      <img src="budda.JPG" width="900px" height="300px" /> 
     </div> 
...

来源

2013-04-14 Timothy Coetzee

“它不起作用'...关心这个更具描述性？ *如何*它不起作用？ – Arran

仔细检查你的语法。在调用'setInterval（）'的时候，你至少错过了一个括号，你最好写'var img = [];'来创建你的数组。对于没有更具体的道歉，请致电 –

。它停留在第一张图片上。像弗雷德里克所说的，图像不会像我想要的那样改变 –

var index = 0; 

function changeBanner() { 
    [].forEach.call(document.images, function(v, i) { 
     document.images[i].hidden = i !== index 
    }); 
    index = (index + 1) % document.images.length; 
} 
window.onload = function() { 
    setInterval(changeBanner, 1000) 
};

http://jsbin.com/emilef/2/edit

来源

2013-04-14 10:08:13 user2153497

function changeBanner(){ 
var img = new array 

img[0] = document.images[0].src 
img[1] = document.images[1].src 
img[2] = document.images[2].src 

var currentimg = img[0]

现在currentimg是img[0]

if(currentimg == img[0]) {

这会成真 currentimg = IMG [1] }

现在currentImg具有值img[1]

if(currentimg == img[1]) {

这将是真以及

currentimg = img[2] 
}

currentImg具有img[2]

值}

现在，让我们走，虽然的currentImg

你需要1）理清逻辑2）设置一定的DOM对象到这个新的价值的价值。

来源

2013-04-14 09:29:36

看看这个控制台;）

var imgs=document.images; 
function changeBanner(){ 
    var firstImgSrc = imgs[0].src + ""; 
    for(var i=0;i<imgs.length-1;i++){ 
     imgs[i].src=imgs[i+1].src+""; 
    } 
    imgs[imgs.length-1].src=firstImgSrc; //replace last image src with first one 
} 
var interval = setInterval(changeBanner, 5000);

来源

2013-04-14 09:39:50 Ikrom

的setInterval('changeBanner()', 10000;在你的代码无法正常关闭，它缺少 “）” 10000后，它应该是：

setInterval('changeBanner()', 10000);

而且， setInterval函数只会在正文加载时调用。所以，只需在JavaScript文件中添加该函数并将其链接到html。就像这样：

<script type="text/javascript"> 
function changeBanner(){ 
    var img = new array 

    img[0] = document.images[0].src 
    img[1] = document.images[1].src 
    img[2] = document.images[2].src 

    var currentimg = img[0] 

    if(currentimg == img[0]) { 
     currentimg = img[1] 
    } 

    if(currentimg == img[1]) { 
     currentimg = img[2] 
    } 
} 

    setInterval('changeBanner()', 10000); 
</script>

来源

2013-04-14 09:40:26 Sujal

你的代码中有几个功能问题：

body标签的onload属性中的代码不正确关闭
代码内部changeBanner将始终执行所有if语句，永不执行图像周期

无论修复如何，您都可以使代码更清晰一些，从主体标记中删除内联脚本，并使用索引来修复if语句问题，以跟踪集中的当前图像。

假设你有HTML像你这样的，有3张图片hidden所有首发：

<body> 
    <div id="wrapper"> 
     <div> 
      <img src="http://placehold.it/100x150" width="300px" height="150px" hidden /> 
      <img src="http://placehold.it/200x250" width="300px" height="150px" hidden /> 
      <img src="http://placehold.it/300x350" width="300px" height="150px" hidden /> 
     </div> 
    </div> 
</body>

你并不需要使用body的onload属性。

使用window.onload而不是您可以指定一个函数，该函数将在load事件后自动调用，该事件在DOM准备就绪并加载所有图像之后。

最好你将所有的脚本代码放在一个单独的.js文件中，并且只在HTML中包含对它的引用。不过，为了简单起见，我的确保持了目前的方法。

在你可以建立你的变量，然后启动间隔，与此类似的功能：

<script type="text/javascript"> 
    var currentImageIndex = -1, 
     maxImageIndex = 0, 
     images = [], 
     changeInterval = 1500; 

    // prepares relevant variables to cycle throguh images 
    var setUp = function() { 
     images = document.images; 
     maxImageIndex = images.length; 
     currentImageIndex = 0; 
    }; 

    // changes the banner currently being displayed 
    var changeBanner = function() { 
     var i; 

     // either re-set the index to 0 if the max length was reached or increase the index by 1 
     currentImageIndex = (currentImageIndex >= maxImageIndex - 1) ? 0 : currentImageIndex += 1; 

     for (i = 0; i < maxImageIndex; i += 1) { 
      images[i].hidden = (i !== currentImageIndex); 
     } 
    }; 

    // a function which is triggered following the `load` event 
    window.onload = function() { 
     setUp(); 

     images[currentImageIndex].hidden = false; // show the first banner image; 

     setInterval(changeBanner, changeInterval); // following a delay, keep changing the banner image by the specified interval 
    }; 
</script>

DEMO - 固定的逻辑问题，并使用windows.onload()

来源

2013-04-14 11:14:59 Nope

如何循环显示一组图像？

回答

相关问题