Fatal编程技术网
  • javascript/
  • Javascript 自动切换到下一个图像

Javascript 自动切换到下一个图像

javascript html css image

Javascript 自动切换到下一个图像,javascript,html,css,image,Javascript,Html,Css,Image,我有以下代码用于显示悬停时更改的多个图像，但我还想添加一个功能，如果我不手动更改图像，该功能将自动更改图像。 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

我有以下代码用于显示悬停时更改的多个图像，但我还想添加一个功能，如果我不手动更改图像，该功能将自动更改图像。 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />

</head>

<body>  
<p>
  <script type="text/javascript" language="javascript">
    function changeImage(img){
       document.getElementById('bigImage').src=img;

    }
  </script>

  <img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage"    
/>
<p>&nbsp; </p>
<div>
  <p>
  <img src="../Pictures/lightcircle2.png" height="79" width="78" 

onmouseover="changeImage('../Pictures/lightcircle2.png')"/>

 </p>
 <p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" 

onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>

 <p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79"    

onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>

 <p>&nbsp;</p>


 </br>
</div>
</body>
</html>

”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档


功能更改图像（img）{
document.getElementById（'bigImage'）。src=img；
}
我想做的是自动更改使用javascript显示的图像。如何才能做到这一点？

使用setInterval运行一个函数来更改图像src

var x = 0;
var images = new Array("../Pictures/lightcircle2.png","../Pictures/lightcircle.png");
var i = setInterval(auto, 3000);

function auto()
  {
    x++;
    if (x == images.length)
       x=0;
    document.getElementById('bigImage').src=images[x];      
  }
这将有助于您：

听起来你想要一个旋转木马。如果是这样，试试这个

将此添加到JavaScript中

// The list of images you want to cycle through
var imageRotation = [
           '../Pictures/lightcircle.png',
           '../Pictures/lightcircle2.png'
];
// The current image being displayed
var currentImage = 0;
// A variable to hold the timer
var t; 

// Call this to automatically start rotation. Currently set for a 5 sec rotation
function startCarousel(){
    t=setInterval(changeCarousel,5000);
}

// Moves to the next picture
function changeCarousel(){
    // Change to the next image
    currentImage++;
    // If there isn't a next image, go back to the start
    if (currentImage == imageRotation.length) currentImage = 0;
    // Change the image
    document.getElementById('bigImage').src=imageRotation[currentImage];
}
然后将函数修改为

function changeImage(img){
   // Stops the rotation
   clearInterval(t);
   // Assigns currentImage to the image they selected
   currentImage = imageRotation.indexOf(img);
   // Swap the image
   document.getElementById('bigImage').src=imageRotation[currentImage];
   // Start the rotation again in 10 sec
   setTimeout(startCarousel, 10000); 
}
你可以用一个调用函数的间隔来改变pic periodicallyokey你能告诉我更多吗。我不擅长javascript不幸的是这取决于你。你可以有一系列的img链接，然后循环浏览。我没有任何回应就这么做了。我用changeImage函数改成了你写的，我犯了一个错误。哎呀。我在startCarousel（）中使用了setTimeout而不是setInterval，您需要从setInterval和setTimeout调用中删除引号和方括号。我已经更新了代码