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

Question

我正在尝试实现一个计时器，它将把更大的图像与下一个图像进行交换，我觉得我走在正确的轨道上，但我没有达到这个目标。我不能使用Jquery或(event.target)、(event.srcElement)或appendChild。有什么想法吗？我不认为我现在的职责是做任何事。现行代码如下：

​

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

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

​

Answer 1

这应该是你要找的。我设定了一个时间间隔来旋转你的图像。如果用户单击图像，则会更改图像并重置间隔。

​

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Photo Gallery</title>
		<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)
		</script>
		
		/* styling elements */
		<style>
			img
				{
					width: 300px;
					height: 290px;
					padding: 2px;
				}
			body
				{
				text-align: center;
				background-color: black;
				}
		</style>
	</head>

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

​

Answer 2

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

您根本没有计时器:)在这里，如何实现一个：

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>

​