在定时器上的照片库上切换聚焦的图片

我试图实现一个计时器，它将更大的图像与下一张图像进行交换，我觉得我在正确的轨道上，但我不是到达那里。我无法使用Jquery或（event.target），（event.srcElement）或appendChild。有任何想法吗？我不认为我的功能现在正在做任何事情。下面当前代码：在定时器上的照片库上切换聚焦的图片

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title>Photo Gallery</title> 
 
\t \t <script> 
 
\t \t var aryImages[] = {"1.jpg", "2.jpg", "3.jpg"} 
 
\t \t \t function changeImage(varImage) { 
 
\t \t \t \t document.getElementById('bigImage').src='images/1.jpg'; 
 
\t \t \t \t for (var i = 1; i < 4; i ++) 
 
\t \t \t \t \t index.html = "images/1.jpg" + photoOrder[i] +"sm.jpg"; 
 
\t \t \t } 
 
\t \t </script> 
 
\t \t 
 
\t \t /* styling elements */ 
 
\t \t <style> 
 
\t \t \t img 
 
\t \t \t \t { 
 
\t \t \t \t \t width: 300px; 
 
\t \t \t \t \t height: 290px; 
 
\t \t \t \t \t padding: 2px; 
 
\t \t \t \t } 
 
\t \t \t body 
 
\t \t \t \t { 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t background-color: black; 
 
\t \t \t \t } 
 
\t \t </style> 
 
\t </head> 
 

 
\t 
 
\t <body> 
 
\t <div> 
 
\t \t <img src="images/1.jpg" id="bigImage" /> 
 
\t </div> 
 
\t <img src='images/1.jpg' id='image1' onclick="changeImage(image1)" /> 
 
\t <img src='images/2.jpg' id='image2' onclick="changeImage(image2)"/> 
 
\t <img src='images/3.jpg' id='image3' onclick="changeImage(image3)"/> 
 
\t \t 
 
\t \t 
 
\t </body> 
 
</html>

来源

2017-09-27 Skry Blackfall

在你提到你想要一个计时器，切换图像后，但在你的HTML要调用一个单击处理。您是否希望点击或通过计时器进行交换？ – bazzells

用户应该能够点击图像来改变图像，但如果他们不这样做，它会交换一个计时器。 –

@bazzells你知道如何做到这一点吗？ –

这应该是你在找什么。我设置了一个可以旋转图片的时间间隔。如果用户单击图像，则会更改图像并重置间隔。

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title>Photo Gallery</title> 
 
\t \t <script> 
 
        var i = 1; 
 
        function changeImage(event, varImage) { 
 
         document.getElementById('bigImage').src='images/' + varImage + '.jpg'; 
 
         // use this so the image interval doesnt 
 
         // interfere with user's click 
 
         if (event !== null) { 
 
          clearInterval(newInt); 
 
          newInt = setInterval(() => { 
 
           changeImage(null, i++); 
 
           if (i === 4) i = 1; 
 
          }, 500); 
 
         } 
 
        } 
 
        var newInt = setInterval(() => { 
 
         changeImage(null, i++); 
 
         if (i === 4) i = 1; 
 
        }, 500) 
 
\t \t </script> 
 
\t \t 
 
\t \t /* styling elements */ 
 
\t \t <style> 
 
\t \t \t img 
 
\t \t \t \t { 
 
\t \t \t \t \t width: 300px; 
 
\t \t \t \t \t height: 290px; 
 
\t \t \t \t \t padding: 2px; 
 
\t \t \t \t } 
 
\t \t \t body 
 
\t \t \t \t { 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t background-color: black; 
 
\t \t \t \t } 
 
\t \t </style> 
 
\t </head> 
 

 
\t 
 
\t <body> 
 
\t <div> 
 
\t \t <img src="images/1.jpg" id="bigImage" /> 
 
\t </div> 
 
\t <img src='images/1.jpg' id='1' onclick="changeImage(event, 1)" /> 
 
\t <img src='images/2.jpg' id='2' onclick="changeImage(event, 2)"/> 
 
\t <img src='images/3.jpg' id='3' onclick="changeImage(event, 3)"/> 
 
\t \t 
 
\t \t 
 
\t </body> 
 
</html>

来源

2017-09-27 04:38:03 bazzells

图像交换非常好，但仍然不能点击其中的任何一个。：/ –

我的错误，我传递了错误的值作为“ID”。应该是“1”，“2”。不是“image1”，“image2”。 – bazzells

更新为这样。 – bazzells

首先你并没有改变任何东西

你没有一个计时器在所有:) 这里如何实现一个：

setInterval(function(){ 
    // do something; 
}, 3000);

现在在计时器内你应该改变图像

例如您应该运行检查图像元素，看变化，因为没有图像在这些来源

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; 
 
    var currentImage = 0; 
 
    // assuming that image is the image index in the array. 
 
    
 
    var changeImage = function (image) { 
 
     document.getElementById('bigImage').src = 'images/' + images[image]; 
 
    }; 
 
    
 
    // now we can use setInterval function 
 
    setInterval(function(){ 
 
     // check if we reached the last image 
 
     if(currentImage >= images.length -1) { 
 
      // if last image go back to first one 
 
      currentImage = 0; 
 
     } else { 
 
      // if not last image so give me the next 
 
      currentImage ++; 
 
     } 
 
     // do the image change 
 
     changeImage(currentImage); 
 
    }, 3000);

<img src="images/image1.jpg" id="bigImage" /> 
 

 
<button onclick="changeImage(0)" > image1 </button> 
 
<button onclick="changeImage(1)" > image2 </button> 
 
<button onclick="changeImage(2)" > image3 </button>

来源

2017-09-27 03:47:52

我不确定你告诉我把这些片段放在哪里。 –

ah ok 在您的JavaScript文件或任何你写的javascript ||或者只是用你的javascript代替它 –

在定时器上的照片库上切换聚焦的图片

回答

相关问题