Question

我试图实现一个计时器，将更大的图像与下一个图像交换，我觉得我在正确的轨道上，但我没有到达那里。我不能使用Jquery或（event.target），（event.srcElement）或appendChild。有任何想法吗？我不认为我的功能现在正在做任何事情。目前的代码如下：

＆＃13;

<!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>

＆＃13;

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);

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

例如，

您应该在图像上运行inspect元素以查看更改，因为这些源中没有图像

＆＃13;

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);

＆＃13;

<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>

＆＃13;

将聚焦的图片切换到计时器上的照片库

2 个答案: