JavaScript. Замена одного фото на другое на странице сайта.
Вариант 1
<img id="image" src="image1.jpg" alt="Изображение">
<button id="btn">Следующее фото</button><script>
document.getElementById("btn").addEventListener("click", function() {
var image = document.getElementById("image");
image.src = "image2.png";
});
</script>Исполнение кода всех вариантов скриптов, будет приблизительно одинаковым. В 9 случаях, фото заменяется другим. В 2, двигаются по кругу.
Вариант 2
Здесь нет кнопки. Кликайте на фото. Изображения заменяются по кругу.
<img id="image" src="image1.jpg" onclick="btn()" alt="Изображение"><script>
var image = null;
var i = 0;
// В Array можно добавить фото через запятую. Можно удалить.
var imgs = new Array("image1.jpg", "image2.png", "image3.png", "image4.png");
function onDocumentReady() {
image = document.getElementById("image");
}
function btn() {
i++;
if (i == imgs.length)
i = 0;
image.src = imgs[i];
}
// Инициализация первой функции
document.addEventListener("DOMContentLoaded", onDocumentReady);
</script>Вариант 3
<img id="image" src="image1.jpg" alt="Изображение">
<button id="btn">Следующее фото</button><script>
document.onclick = function btn() {
var image = document.getElementById("image");
image.src = "image2.png";
};
</script>Вариант 4
<img id="image" src="image1.jpg" alt="Изображение">
<button onclick="btn()">Следующее фото</button><script>
function btn() {
var image = document.getElementById("image");
image.src = "image2.png";
}
</script>Вариант 5
<img id="image" src="image1.jpg" alt="Изображение">
<button onclick="btn()">Следующее фото</button><script>
function btn() {
document.getElementById("image").src = "image2.png";
}
</script>Вариант 6
<img id="image" src="image1.jpg" alt="Изображение">
<button onclick="btn()">Следующее фото</button><script>
function btn() {
var image = document.getElementById("image");
image.setAttribute("src", "image2.png");
}
</script>Вариант 7
Замена фото по времени.
<img id="image" src="image1.jpg" alt="Изображение"><script>
setInterval(btn, 9000);
function btn() {
var image = document.getElementById("image");
image.src = "image2.png";
}
</script>Вариант 8
С помощью querySelector можно получить доступ к конкретному элементу на странице.
<img id="image" src="image1.jpg" alt="Изображение">
<button onclick="btn()">Следующее фото</button><script>
// Получаем ссылку на изображение, которое хотим заменить
const img = document.querySelector("image");
function btn() {
// Создаем новый элемент img с другим изображением
const newimg = document.createElement("image");
image.src = "image2.png";
}
</script>Вариант 9
Здесь нет кнопки. Кликайте на фото.
<img id="image" src="image1.jpg" onclick="btn()" alt="Изображение"><script>
var i = 0;
var image = document.getElementById("image");
// В Array можно добавить фото через запятую. Можно удалить.
var imgs = new Array("image1.jpg", "image2.png", "image3.png", "image4.png");
var j = imgs.length;
function btn() {
if (i != (j-1))
{i++;}
image.src = imgs[i];
}
</script>Вариант 10
Здесь нет кнопки. Кликайте на фото.
<img id="image" src="image1.jpg" onclick="btn()" alt="Изображение"><script>
var i = 0;
// В Array можно добавить фото через запятую. Можно удалить.
var imgs = new Array("image1.jpg", "image2.png", "image3.png", "image4.png");
function btn() {
var image = document.getElementById("image");
image.src = imgs[++i];
}
</script>Вариант 11
Простой слайдер с кнопками замены фото. Кнопки работают вперёд/назад и каждая кнопка по кругу.
<div>
<button onclick="prev()">Предыдущая</button>
<img id="slider" src="image1.jpg" width="70%">
<button onclick="next()">Следующая</button>
</div><script>
var images = ["image1.jpg", "image2.png", "image3.png", "image4.png"];
var num = 0;
function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) {
num = 0;
}
slider.src = images[num];
}
function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) {
num = images.length-1;
}
slider.src = images[num];
}
</script>Примечание ко всем вариантам.
1. Два варианта на одной странице сайта работать не будут.
2. Чтобы фото, кнопка располагались прилично, ещё нужен CSS.
3. Для красоты код расположен на сером фоне, то есть используется подсветку синтаксиса кода.
Хорошо убирает этот фон приложение – переводчик Google.