Skip to content

Instantly share code, notes, and snippets.

@jpedrosa

jpedrosa/gist:078be0e327b07790c85e

Created March 2, 2015 02:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jpedrosa/078be0e327b07790c85e to your computer and use it in GitHub Desktop.
Save jpedrosa/078be0e327b07790c85e to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript image switching animation.
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>Switching image sample.</title>
</head>
<body>
<div style="border: solid 1px black; background-color: silver">
<img id="faceAImage" alt="Face A" width="638" height="374"
border="0"
src="http://148.251.91.98/000/20150301/11/s6wJ1Am4Dp0hmsvJkmFvTv/casinologo.png" />
<img id="faceBImage" alt="Face B" width="638" height="374"
border="0" style="display:none"
src="http://148.251.91.98/000/20150301/11/s6wJ1Am4Dp0hmsvJkmFvTv/casinologo2.png" />
</div>
<script>
var faceA = document.getElementById("faceAImage"),
faceB = document.getElementById("faceBImage"),
aIsVisible = true;
setInterval(function() {
if (aIsVisible) {
faceA.style.display = "none";
faceB.style.display = "";
} else {
faceA.style.display = "";
faceB.style.display = "none";
}
aIsVisible = !aIsVisible;
}, 400);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment