Make a Simple Image Slide Show Project Using JavaScript
- Subject: Javascript Tutorials
- Learning Time: 30 minutes
Hi in this tutorial we will be making a simple image slide show project using JavaScript. This slide show will have some CSS animation which will be triggered by the JavaScript function in the page. This is a simple project perfect for beginners to play with and improve on. We are continuing with our journey to learn more about JavaScript and work up to design basic games in JavaScript. This will take us a little step forward in that direction. For this project you can use your own images or you can download the ones from the link below the video. There are 6 images numbered 1 – 6 and they are all JPG images. If you want to use your own images for a project like this make sure you know the file extension you are using such as PNG, GIF, or BMP. we will be styling the page using CSS and also add a little fade in animation to the images when the buttons are clicked. This will be fun tutorial to get some practice into JavaScript lets get started.
Lesson outcomes:
- Make a Image Slide Show using JavaScript
- Create a Fade in Animation using CSS
- Trigger that animation only on the image when the Back or Next button is clicked
- Reload the images when the max number images is met in the program
- Look at cute cat pictures
Video Tutorial
Download the Images for the Slide Show
Source Code –
<html>
<head>
<title>JS Image Slide Show with MOO ICT</title>
<style>
body{
background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
height: 100%;
}
#container
{
width: 700px;
border: 4px solid black;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
text-align: center;
margin-top: 5%;
background-image: radial-gradient( circle 619.3px at 10% 20%, rgba(166,223,75,1) 0%, rgba(255,217,57,1) 100.2% );
}
img
{
width: auto;
max-width: 500px;
height: 600px;
background-color: rgb(163, 0, 0);
padding: 10px;
border-radius: 30px;
}
button
{
width: 100px;
height: 60px;
margin-left: 100px;
margin-right: 100px;
margin-top: 10px;
margin-bottom: 10px;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.play
{
animation: fadein .4s ease-in;
}
</style>
</head>
<body>
<div id="container">
<h1>JS Image Slide Show with MOO ICT</h1>
<div id="image">
<img id="img" src="images/1.jpg" alt="">
</div>
<div id="controls">
<button onclick="GoBack()">Back</button>
<button onclick="GoNext()">Next</button>
</div>
</div>
<script>
var num = 1;
var element = document.getElementById("img");
function GoBack()
{
if(num > 1)
{
num--;
}
else
{
num = 6;
}
PlayAnimation();
}
function GoNext()
{
if(num < 6)
{
num++;
}
else
{
num = 1;
}
PlayAnimation();
}
function PlayAnimation()
{
element.src = "images/"+num+".jpg";
element.classList.remove("play"); // reset the animation
void element.offsetWidth; // trigger the reflow of img tag
element.classList.add("play");
}
</script>
</body>
</html>