6:50 AM
Csabi
How to create a Slideshow without jQuery, just Javascript and HTML
In this tutorial I will show you how to create a simple but effective Slideshow using only HTML, CSS and Javascript. The concept of this slideshow is simple: to change the image the content of a div will be changed using innerHTML. But, this is far enough for now, because I want to write this tutorial to be understood by everybody, with or without previous experience in Javascript.Now, you probably ask "Where I need to write the code?" - Well you can write it in any HTML editor like Adobe Dreamweaver or you can write it simply in Notepad (this is what I will describe in this tutorial), because HTML and Javascript don`t require a compiler like C++.
Just open Notepad and write the following code in a blank file:
<html>
<head>
</head>
<body>
<!-- Code goes here -->
</body>
</html>
Now click on File >> Save as...<head>
</head>
<body>
<!-- Code goes here -->
</body>
</html>
At the file name type in any name, but end it with .html, (e.g.: slideshow.html), and at Save as type select All filesTo preview your page just open your file in a browser like Firefox or Internet Explorer - it should be a blank page.
It`s useful to preview you code from time to time, because if you get an error at the end you will need to recheck the whole code.
Now, you can remove the <!-- Code goes here --> line, just remember that the code needs to be placed between the <body> and </body> tags.
Creating the div`s
We need 3 div`s (a div is like and invisible box):
- one to hold the entire slideshow (the following 2 div`s) - call it slideshow (id="slideshow")
- another one to hold the images (one at a time) - slideshowimage
- and one to hold the control buttons (next, prev...) - slideshowcontrols
Note: All of these divs will have fixed width, I will use 400px, but you can use any size, because the script will detect any size, but make sure that you use the same width for all of them!
Use for all of the divs the overflow:hidden; option.
I recommend to use inline CSS (using the style="" tag)
Here is my code:
<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
</div>
</div>
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
</div>
</div>
Start working with Javascript
Write the following code bellow the above code (before </body>):
<script type="text/javascript">
</script>
These are the starting and the ending tags of Javascript.</script>
Now create between those tags function called changeimage and inside alert "ok":
<script type="text/javascript">
function changeimage(){
alert("ok");
}
</script>
Now we need something to trigger the function. The images will change on pressing a button: Prev, Next or by clicking the image, so first let`s add the two buttons to the slideshowcontrols div:function changeimage(){
alert("ok");
}
</script>
I will use a tags with onclick event:
<a onclick="changeimage();">Prev</a>
<a onclick="changeimage();">Next</a>
Save your file and click on one of the buttons - it should alert "ok".<a onclick="changeimage();">Next</a>
If you have followed with attention each step your code should look like this:
<html>
<head>
</head>
<body>
<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onclick="changeimage();">Prev</a>
<a onclick="changeimage();">Next</a>
</div>
</div>
<script type="text/javascript">
function changeimage(){
alert("ok");
}
</script>
</body>
</html>
Continue to the second part of the tutorial<head>
</head>
<body>
<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onclick="changeimage();">Prev</a>
<a onclick="changeimage();">Next</a>
</div>
</div>
<script type="text/javascript">
function changeimage(){
alert("ok");
}
</script>
</body>
</html>
0 comments:
Post a Comment