Question

我在程序中有一些限制，如果

解决方案不需要JQuery，如上所述，它确实有一些

限制。

我想要实现的是。

使用JavaScript动态更改图像。（完成）
当用户单击图像时，每个图像将导致一个不同的链接。（需要帮助！）

下面是我当前的代码。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var image1=new Image()
image1.src="image_1.jpg" 

var image2=new Image()
image2.src="image_2.jpg"

var image3=new Image()
image3.src="image_3.jpg"

var step = 1 

function slideit(){

document.images.slide.src=eval("image"+step+".src")

if(step<3) step++

else step=1

setTimeout("slideit()",2500)

}

slideit()

function inputhref() {

var href = 'https://www.google.ca/';

window.open(href)

}
</script>
</head>
<body>
<img src="image_1.jpg" name="slide" width="400" height="400" 
 onclick="inputhref()">

Answer 1

我解决的错误很少，现在可以正常工作！

window.location.href用于在同一窗口中打开网址。
document.querySelector()用于选择元素。
使用函数名称调用setTimeout()，而无需使用''。

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <img src="image_1.jpg" id="slide" width="100" height="100" 
     onclick="inputhref()">
     
     
    <script type="text/javascript">

    var image1=new Image()
    image1.src="https://image_1.jpg" 

    var image2=new Image()
    image2.src="https://image_2.jpg"

    var image3=new Image()
    image3.src="https://image_3.jpg"
    
    var step = 1 
    var slide = document.querySelector('#slide');
    var timer
	
	function slideit(){
	
	slide.src="https://image_"+step+".jpg"
	
	if(step<3) step++
	
	else step=1
  console.log('Image changed to ' + slide.src);
	timer = setTimeout(slideit,2500)

	}

slideit();

    function inputhref() {

	window.location.href = slide.src;
  clearInterval(timer);
	
	}
    </script>
</body>
</html>

Answer 2

您可以创建一个同时存储图像源和关联链接的对象。另外，除了设置和检索源URL之外，您是否还对那些Image()类进行了任何处理？因为您也可以将这些简单的字符串存储在对象中。我还建议既将步骤存储为属性，又将所有步骤都保存在一个数组中，以使找到正确的步骤更加容易。

类似的东西：

var images = [
    {
        step: 1,
        src: "image_1.jpg",
        link: "http://example.com/image1-link",
    },
    {
        step: 2,
        src: "image_2.jpg",
        link: "http://example.com/image2-link",
    },
    // Repeat as necessary
]

然后您可以相应地更改功能：

function slideit() {
    var correctImage = images.find(image => image.step == step);
    document.images.slide.src = correctImage.src;
    // rest is unchanged
}

function inputhref(step) {
    var correctImage = images.find(image => image.step == step);
    window.open(correctImage.link);
}

我如何用不同的图像window.open不同的href

2 个答案: