Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Website SlideShow using JavaScript, CSS and HTML

In this article we will discuss how to create a slideshow for a website by the help of JavaScript, CSS and HTML techniques.

Step 1:

First of all we will create division of the web page using the div tag by the help of HTML, and then we will give the borders pixels and margins using CSS. There should be a question in your mind why we need to create division of website using the div tag. The answer is, when we create a website so in the beginning we decide the boundaries i.e. contents, wrapper, container etc.

Like this we need know if we are using division technique in the developing of a website, for what things we should create the division of the web page. In the Content div we will use the contents which will be show on the front of the web page, in the wrapper page we will use it just for create a boundary in the areas of the content div (content div will be used in the wrapper div).

Listing 1: SlideShow.html

<!DOCTYPE HTML>
<hmtl>
<head>
<title>SlideShow</title>
</head>
<body>
<div id="wrapper">
<div id="slideshow">
</div>
<div id="container">
</div>
</div>
</body>
</html>

After creating the division of the webpage by the help of div tag, if you check the SlideShow.html file so you will see nothing, because there is no any content on this page. It is fully empty so let’s add something on the SlideShow.html and then use CSS to create it attractive. Let me I tell you something about CSS styles, there are three types of methods to input CSS styles to a webpage, i.e. Inline Style, Internal Style, and External Style. I will use Internal Style to make you understand very easily step by step.

Sample Output of the CSS Style to descript the div tags

Figure 1: Sample Output of the CSS Style to descript the div tags

As I told you that we will divide the webpage in some parts using div tag. In (Figure 1) you can see the colored divisions of the webpage. The Green color is the wrapper div tag, the Red color is the SlideShow div tag and the last one Blue color is the Container div tag. For clearing the div tags I used some text on them which you can see them.

Listing 2: CSS Styles

<style>
#wrapper {width: 900px; margin:0 auto; background-color:#00FF00;
			}
#container { height:auto;
	margin:0 auto;
	padding:0 0 20px;
	width:751px;
	background-color:#00FFFF;}
#slideshow {
-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	-moz-border-radius: 20px;
	border-radius: 20px;
	box-shadow: 2px 2px 5px #888888;
background-color:#FF0000;
}
</style>
 

Description of the CSS styles:

Using the CSS styles we tried to make the slide show attractive. It’s looking some little bit good, because now it is showing the pictures. But when we link the pictures using the img tag so it will look fully attractive. But you should keep one thing in your mind it is an article from which you are going to learn something but if you try it step by step and do some changes according to your ideas so it will look beautiful.

Listing 3: Sample HTML File slideshow.html with Internal CSS style

<!DOCTYPE HTML>
<hmtl>
<head>
<title>SlideShow</title>
<style>
#wrapper {width: 900px; margin:0 auto; background-color:#00FF00;
			}
#container { height:auto;
	margin:0 auto;
	padding:0 0 20px;
	width:751px;
	background-color:#00FFFF;}
#slideshow img {
-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	-moz-border-radius: 20px;
	border-radius: 20px;
	box-shadow: 2px 2px 5px #888888;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="slideshow">
<p>It is SlideShow Area</p>
</div>
<div id="container">
<h1>It is the Content Area</h1>
</div>
</div>
</body>
</html>

Description of slideshow.html

In the initial stage we yet didn’t write any big thing in this file. Because in this stage we just used internal CSS style to create the slideshow div look attractive. And that’s why we used CSS style to create the slideshow round from its all four corners. As you can see it in (Figure 1) in red color.

Step 2:

Now the time is to insert the images for the slideshow, you should know which type of images should be add in your websites slideshow. Because if you are designing a website for a school which is an education level website but you are going to add images which are about movies posters. So it will be a wrong idea. In this article I will add some beautiful pictures about the natural beauty, suppose we are going to develop a website which is about gardening.

One thing you should keep in your mind during the use of images, you should keep save the images at that directory or folder where you saved the slideshow.html. Because if you are going to try this article step by step but you saved the images in a different directory or folder. So it will be difficult to give the right path of the images to your slideshow.html file.

Listing 4: Inserting Images in slideshow.html with the help of JavaScript


var image1 = new Image();
image1.src = "Roses1.JPEG";
var image2 = new Image();
image2.src = "Roses2.JPEG";
var image3 = new Image();
image3.src = "Roses3.JPEG";
var image4 = new Image();
image4.src = "Roses4.JPEG";



<div id="wrapper">
<div id="slideshow">
<img class='imagem_artigo' src="Roses1.JPEG" name="MySlide" width=900; height=200 />
</div>
 

Description of inserting images with the help of JavaScript:

We used just one time img tag in body tag of the slideshow.html file, after this we used JavaScript to get the source of the images for the slideshow function which we will define it in this file after few minutes. As you are watching a tag that is script. We use it for the JavaScript language. By using this tag we use JavaScript to get the source, using Image () object and declaring a variable for this Image () object then we used src to give the source of the image to the object of the image.

Listing 5: slideshow.html Complete with Internal CSS Style and Also JavaScript

<!DOCTYPE HTML>
<hmtl>
<head>
<title>SlideShow</title>
<style>
#wrapper {width: 900px; margin:0 auto; background-color:#00FF00;
			}
#container { height:auto;
	margin:0 auto;
	padding:0 0 20px;
	width:751px;
	background-color:#00FFFF;}
#slideshow img {
-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	-moz-border-radius: 20px;
	border-radius: 20px;
	box-shadow: 2px 2px 5px #888888;
}
</style>
<script>
var image1 = new Image();
image1.src = "Roses1.JPEG";
var image2 = new Image();
image2.src = "Roses2.JPEG";
var image3 = new Image();
image3.src = "Roses3.JPEG";
var image4 = new Image();
image4.src = "Roses4.JPEG";
</script>
</head>
<body>
<div id="wrapper">
<div id="slideshow">
<img src="Roses1.JPEG" name="MySlide" width=900; height=200 />
</div>
<div id="container">
<h1>It is the Content Area</h1>
</div>
</div>
<script>
var step = 1
function SlideShow(){
//var step = 1
if(!document.images)
return 
document.images.MySlide.src = eval("image"+step+".src")
if(step<4)
step++
else
step=1
setTimeout("SlideShow()",1000)
}
SlideShow()
</script>
</body>
</html>

Description of Slideshow.html technique:

As we can see in the Listing 5 there is full code of the slideshow.html file. Where we used HTML, CSS styles and JavaScript language. From the HTML we use div, img tags and from the CSS we used to give the Styles by using the internal style method on the slideshow. We can also create an external file and save it by the “.css” extension and then link it to the slideshow.html file. It will also work same as it will work now. And we used two time script tag to use JavaScript. By which we use a technique then the pictures are being change time by time. The second tag of script is important to be understand let we see it. How it is working.

Listing 6: Using JavaScript to change the images time by time

<script>
var step = 1
function SlideShow(){
//var step = 1
if(!document.images)
return 
document.images.MySlide.src = eval("image"+step+".src")
if(step<4)
step++
else
step=1
setTimeout("SlideShow()",1000)
}
SlideShow()
</script>

Description of JavaScript Technique:

Using JavaScript we declared a variable and assign it 1, we define a function in which we are checking that, is it getting the images or not? If it is getting the images so return the images to the img tag which is used in body of the slideshow.html. and then if statement will check the variable if it is less than the given value as it is 4, so it will be increment by 1 if it is equal to 4 so it will be assign again 1. And set a time for the image show on the browser.

Final Output of the slideshow

Figure 2: Final Output of the slideshow

As we can see the final output of this article, in which we learnt about the slideshow. So now you can use these steps to create an attractive slide show for your websites. There are many ways to create slideshows, and also you can find some software from the market and you can Google them to create slideshows without programming.

Conclusion:

In this article we learnt about how to create an attractive slideshow for our websites. And we used CSS, HTML and JavaScript techniques in this article. I hope you learnt something from this article and enjoy it. If you any query about it in your mind so please do a comment.



Studing Computer Science and have knowledge in C/C++, Java, VB.net, C#, Assembly Programming, MFC, HTML, XML, JAVASCRIPT, AJAX, JQUERY, PHP, MYSQL, ORACLE

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login