在定時器上的照片庫上切換聚焦的圖片

我試圖實現一個計時器，它將更大的圖像與下一張圖像進行交換，我覺得我在正確的軌道上，但我不是到達那裏。我無法使用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代替它 –

在定時器上的照片庫上切換聚焦的圖片

回答

相關問題