Question

我在数据文件夹中有6个图像，每个图像都有链接的html页面。默认情况下会加载第一张图像。现在点击第二个链接，第二个图像应该加载替换第一个。其余图像链接的方式相同。它有可能吗？

Answer 1

对于你想要的东西，你需要用javascript做到这一点。确切地说，jQuery会更容易使用。

我认为这个例子可以帮助你：

＆＃13;

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<style>
div{width:200px;height:200px;}
img{width:190px;height:190px;}
</style>
</head>

<body>
<div><img src="http://i.imgur.com/3UimJUz.jpg"></div><br/>
<button id="but1">Link 1</button>
<button id="but2">Link 2</button>
<button id="but3">Link 3</button>
<script>
$(document).ready(function(){
$("#but1").click(function(){
	$('img').attr('src','http://i.imgur.com/3UimJUz.jpg');

});
$("#but2").click(function(){
	$('img').attr('src','http://i.imgur.com/tn1IO3v.jpg');
});
$("#but3").click(function(){
	$('img').attr('src','http://i.imgur.com/BfC9rYf.jpg');
});
});

</script>

</body> 

</html>

＆＃13;

Answer 2

通用示例：

<img src="" id="loader">
<a href="#" class="clicker" img-url="http://domain/imgs/1.jpg"> 1</a> 
<a href="#" class="clicker" img-url="http://domain/imgs/2.jpg"> 2</a> 
<a href="#" class="clicker" img-url="http://domain/imgs/3.jpg"> 3</a> 
<a href="#" class="clicker" img-url="http://domain/imgs/4.jpg"> 4</a> 

<a href="#" class="clicker" img-url="http://domain/imgs/N.jpg"> N</a> 

<script>
  $(document).on("click", ".clicker", function(){
    $("#loader").attr ("src", $(this).attr("img-url"));
    return false;
  })
<script>

Answer 3

请检查一下。我想这可能会对你有所帮助。谢谢。

＆＃13;

.imageContainer{width:300px;height:300px;}
.imageContainer img{width:280px;height:280px;}

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="imageContainer">
    <img src="">
  </div>
  <button id="click-1">Image 1</button>
  <button id="click-2">Image 2</button>
  <button id="click-3">Image 3</button>
  <button id="click-4">Image 4</button>
  <button id="click-5">Image 5</button>
</body> 

</html>

＆＃13;

{{1}}

＆＃13;

在点击href链接时，将加载新图像

3 个答案: