Я пытаюсь использовать этот код JavaScript для плавного изменения изображений. Я пытаюсь сделать это, используя чистый JavaScript (не заинтересован в CSS).
У меня есть массив из 6 ссылок на изображения, которые я хочу перебрать. Логика у меня есть, чтобы изменить image2 (он же гитара2) на другой источник изображения, когда непрозрачность image2 достигает 0. Затем увеличить непрозрачность обратно до 1. Когда непрозрачность равна 1, я хочу изменить источник изображения на image1 (иначе guitar1). Затем снова уменьшите непрозрачность изображения image2 до нуля, пока не появится изображение image1. Затем повторяйте этот процесс снова и снова каждые несколько секунд.
Я думаю, что логика вполне обоснована, но я сталкиваюсь с несколькими проблемами.
JS вызывается при загрузке тела с помощью функции runTime ().
Я ценю любую помощь! Я действительно хочу сделать это, используя весь чистый JavaScript, а не CSS.
<!DOCTYPE>
<html>
<head>
<style>
#guitar1
{
position: relative;
top: 0;
left: 0;
}
#guitar2
{
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
}
</style>
</head>
<body onload="runTime()">
<script>
var images = ["gibson1.png", "gibson2.png", "gibson3.png", "gibson4.png", "gibson5.png", "gibson6.png"];
var timer;
var delay;
var image1Opacity;
var index1 = 3;
var index2 = 2;
function reduceOpacity()
{
var op = document.getElementById('guitar2');
// Use getComputedStyle().getPropertyValue() to get accurate representation of opacity's value.
var currentOp = getComputedStyle(op).getPropertyValue("opacity");
// if opacity reaches 0, stop the interval timer.
if (currentOp <= 0) {
//clearInterval(timer);
return currentOp;
}
else {
currentOp -= 0.01;
op.style.opacity = currentOp;
return currentOp;
}
// logs results
console.log(currentOp);
}
function increaseOpacity() {
var op = document.getElementById('guitar2');
// Use getComputedStyle().getPropertyValue() to get accurate representation of opacity's value.
var currentOp = getComputedStyle(op).getPropertyValue("opacity");
// if opacity reaches 0, stop the interval timer.
if (currentOp >= 1) {
//clearInterval(timer);
return currentOp;
}
else {
currentOp = (parseFloat(currentOp) + 0.01);
op.style.opacity = currentOp;
return currentOp;
}
// logs results
console.log(currentOp);
}
function switchImages(opacity) {
if (opacity <= 0) {
document.getElementById("guitar2").src = images[index2];
index2++;
if (index2 == 6)
index2 = 1;
}
else if (opacity >= 1) {
document.getElementById("guitar1").src = images[index1];
index1++;
if (index1 == 6)
index1 = 0;
}
}
function controlSlideShow() {
var reOpacity;
var InOpacity;
do {
reOpacity = reduceOpacity();
}
while (reOpacity > 0);
switchImages(reOpacity);
InOpacity = reOpacity;
do {
InOpacity = increaseOpacity();
} while (InOpacity < 1);
switchImages(InOpacity);
}
function runTime()
{
timer = setInterval(controlSlideShow, 3000);
//controlSlideShow();
}
</script>
<script>
</script>
<h4 id="header">Gibson Les Paul</h4>
<div style="position: relative; left: 0; top: 0;">
<img src="gibson1.png" id="guitar1" width="500" />
<img src="gibson2.png" id="guitar2" width="500" />
</div>
<button type="button" onclick='document.getElementById("guitar2").src = "gibson4.png"'>Click Me!</button>
</body>
</html>