programmerpro-Usually, if you create a slideshow, there are a lot of JQuery framework that you can use. But this time the conditions are different, you must create a slideshow with pure javascript without using JQuery. This condition I have ever faced as a lecturer asked to create a website with a gallery that displays the slideshow, but it is not allowed to use the JQuery framework. So how do I make a slideshow? We can use the function setTimeout () in javascript. In addition there are some conditions in this slideshow. For example, the slideshow should be able to run eg every 5 seconds will change the picture. When the slide came last drawn, then after it goes back to the first image. First, To load an image, the Image object contained Javascript. To make the object declaration is as follows:
img1 = new Image ()
img1.src = "pic1.gif"
the meaning of the above script is to create the object image with the image contents pic1.gif. Next create the file. Html you use a web editor and copy the following code, then save the file name according to your wishes,
img1 = new Image ()
img1.src = "pic1.gif"
the meaning of the above script is to create the object image with the image contents pic1.gif. Next create the file. Html you use a web editor and copy the following code, then save the file name according to your wishes,
img1 = new Image ()
<html>
<head>
<script language="javascript">
<!--
var image1=new Image()
image1.src="1.gif"
var image2=new Image()
image2.src="2.gif"
var image3=new Image()
image3.src="3.gif"
//-->
</script>
</head>
<body>
<center>
<h2>IT Programmer SlideShow</H2><hr size=5
color="black">
<img src="1.gif" name="slide" width="100" height="100">
<script>
<!--
//variable that will raise the matter of image
var step=1
function slideit(){
//if the browser does not support the method of the document. image then exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 5 second
setTimeout("slideit()",5000)
}
slideit()
//-->
</script>
<hr size=5 color="black">
</body>
</html>
REMEMBER adjust your image file name and put in the same folder with the file. Html.
No comments:
Post a Comment