如何在HTML中每3秒更换一次图像

本文介绍了如何在HTML中每3秒更换一次图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有3张照片，我希望它们每3秒更换一次。 我有以下代码也可以，但它们会影响我的其他一些代码。我不知道为什么。 有人可以帮我解决另一个问题。 我不是一个程序员所以请轻松解释一下。谢谢 我的尝试： Html < script type =text / javascript> var picPaths = ['iphone1.png'，'iphone2.png'，'iphone3 .png']; var curPic = -1; //预加载图像以获得流畅的动画 var imgO = new Array（） ; for（i = 0; i< picPaths.length; i ++）{ imgO [i] = new Image（）; imgO [i] .src = picPaths [i]; } 函数swapImage（）{ curPic =（++ curPic> picPaths.length-1）？ 0：curPic; imgCont.src = imgO [curPic] .src; setTimeout（swapImage，2000）; } window.onload = function（）{ imgCont = document.getElementById（'imgBanner'）; swapImage（ ）; } < / script> body Hi,I have 3 pictures and I want them to change every 3 sec.I have the following codes which also works but they re influencing some of my other codes. I don't know why.Can someone help me with another solution.I am not a programmer so please explain things easy. thanksWhat I have tried:Html<script type="text/javascript"> var picPaths = ['iphone1.png','iphone2.png','iphone3.png']; var curPic = -1; //preload the images for smooth animation var imgO = new Array(); for(i=0; i < picPaths.length; i++) { imgO[i] = new Image(); imgO[i].src = picPaths[i]; } function swapImage() { curPic = (++curPic > picPaths.length-1)? 0 : curPic; imgCont.src = imgO[curPic].src; setTimeout(swapImage,2000); } window.onload=function() { imgCont = document.getElementById('imgBanner'); swapImage(); } </script>body < img id =imgBannersrc =alt =width =350height = 456/> <img id="imgBanner" src="" alt="" width="350" height="456" /> CSS #imgBanner { 职位：绝对; 右：80px; top：836px; z-index：9999; 填充：0; } CSS#imgBanner { position:absolute; right: 80px; top:836px; z-index:9999; padding: 0;}推荐答案 你可以利用javascript的内置方法setInterval来实现这个目标。 他这是我能想到的快速解决方案， 如果您有任何疑问，请告诉我。 You can utilize javascript's in-built method setInterval to accomplish this.Here's a quick solution that I can think of,Let me know if you 've any questions.// Initialize images in an arrayvar picPaths = ['iphone1.png','iphone2.png','iphone3.png'];// An index to track the contender image var imageIndex = 0;var bannerImage; // An event callback for starting the intervalfunction startInterval() { setInterval(displayNextImage, 3000);}function displayNextImage() { bannerImage.src = picPaths[imageIndex]; if(imageIndex === (picPaths.length-1)) { imageIndex = 0; } else { imageIndex = imageIndex + 1; // It can be replaced with imageIndex ++ }}window.onload=function() { bannerImage = document.getElementById('imgBanner'); startInterval();} 这篇关于如何在HTML中每3秒更换一次图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！