Как создать мини-галерею изображений с помощью javascript?
Я пытался создать мини-галерею изображений, в которой есть тег img для основного изображения, называемый «defaultPic», и еще два тега img для вспомогательных изображений, называемых «subPic1» и «subPic2». Итак, в основном изображение по умолчанию - subPic1, я хочу, чтобы когда пользователь щелкнул subPic2, изображение в defaultPic должно быть заменено на subPic2 наоборот. Большее поле - это изображение по умолчанию, а меньшее - subPic1 и subPic2. Я попытался добавить событие onclick к дополнительным изображениям, которые при нажатии извлекают источник изображения и передаются на изображение по умолчанию. Но когда я попытался щелкнуть, скажем, subPic2, событие onclick не срабатывает, и ничего не происходит. Пожалуйста, помогите мне решить эту проблему или предложите лучшие решения для достижения той же цели.
Что я уже пробовал:
Вот html скрипт:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="Image1.js"></script>
<script src="Image2.js"></script>
</head>
<body>
<img id="defaultPic" src="microsoftLogo1.jpg" /><br/>
<img id="subPic1" src="microsoftLogo1.jpg"
onclick="getImage1()"/><br/>
<img id="subPic2" src="microsoftLogo2.jpg"
onclick="getImage2()"/>
</body>
</html>
Вот это в CSS:
*{
margin: 0;
padding: 0;
}
#defaultPic {
border: 1px solid black;
margin: 5px;
width: 200px;
height: 200px;
}
#subPic1{
border: 1px solid black;
margin: 5px;
width: 50px;
height: 50px;
}
#subPic2{
border: 1px solid black;
margin: 5px;
width: 50px;
height: 50px;
}
Вот код javascript:
function getImage1(){
var img = document.getElementById("subPic1").src;
document.getElementById("defaultPic").src = img;
}
function getImage2(){
var img = document.getElementById("subPic2").src;
document.getElementById("defaultPic").src = img;
}
</<pre lang="CSS"><pre lang="CSS"><pre lang="CSS">pre>