I'm looking for a code, which adds a transition after the picture changes. Here's my code:
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "1.jpg";
images[1] = "2.jpg";
images[2] = "3.jpg";
</script>
<body onload = "startTimer()">
<img id="img" src="1.jpg"/>
</body>
Is there any possible way to add some transition when the code changes the image?
Roughly for example a fadeIn effect must be:
function fadeIn(elementId, miliseconds) {
var el = document.getElementById(elementId);
el.style.opacity = 0;
var op = parseFloat(0);
var timer = setInterval(function() {
if (op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, miliseconds);
}
Here you have a working example with your code and some additions
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.