I’ve created a javascript code to show sliding image on the web (youtube-like video preview).
Requirement
To use the script you need an HTML and Javascript Editor, I’m using Adobe Dreamweaver. You may need 6 jpg image files (to try an example below), and ofcourse a web browser.
Click read more for see the script.
The Script Code
Here comes the script code, copy it to your favorite editor and save to “sliding_image.js” file.
// Sliding Image Script
// Author: Lucky
var timeout=3000;
var displayNum = 0;
var current_picture = new Image();
var holders=document.getElementsByName('holder');
var indexes=new Array(holders.length);
var intervalId;
function getElementsByClass(searchClass,node,tag){
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function startshow(){
slideshow();
intervalId=setInterval("slideshow()", timeout);
}
function slideshow(){
if (displayNum == displayData.length)
{
displayNum = 0;
}
var holders=document.getElementsByName('holder');
var dispInfo=getElementsByClass('dispInfo',null,'span');
for(i=0;i
Usage
Now I'll show you how to use the script, copy the code below and save it to "demo_slide.htm", don't forget to put images in the "images" folder, named img1.jpg, img2.jpg, and so on. Run your htm file in browser, and see the image sliding. Try to click on the image or text below it, it will show you the image number.
![]()
![]()
![]()
Now you can customize the script to match your need.
No related posts.
Tags: javascript, sliding image
i have try it but it doesn’t run…..
you can try the full source code of the html file below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Image Script Example</title>
<script language="javascript1.2">
// Sliding Image Script
// Author: Lucky
var timeout=3000;
var displayNum = 0;
var current_picture = new Image();
var holders=document.getElementsByName(’holder’);
var indexes=new Array(holders.length);
var intervalId;
function getElementsByClass(searchClass,node,tag){
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = ‘*’;
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function startshow(){
slideshow();
intervalId=setInterval("slideshow()", timeout);
}
function slideshow(){
if (displayNum == displayData.length)
{
displayNum = 0;
}
var holders=document.getElementsByName(’holder’);
var dispInfo=getElementsByClass(’dispInfo’,null,’span’);
for(i=0;i<holders.length;i++){
n=(displayNum+i)%displayData.length;
indexes[i]=n;
holders[i].src=displayData[n][0];
if(document.all){ //check internet explorer or not
dispInfo[i].innerText=displayData[n][1];
}else{
dispInfo[i].textContent=displayData[n][1];
}
}
displayNum++;
}
function onclickDisplay(obj){
var holders=document.getElementsByName(’holder’);
var dispInfo=document.getElementsByTagName(’span’);
var selected=-1;
for(i=0;i<holders.length;i++){
if(dispInfo[i]==obj){
selected=indexes[i];
break;
}
if(holders[i]==obj){
selected=indexes[i];
break;
}
}
if(selected!=-1){
alert(displayData[selected][2]);
}
}
function onhoverDisplay(){
clearInterval(intervalId);
}
function onoutDisplay(){
intervalId=setInterval("slideshow()", timeout);
}
</script>
</head>
<body>
<script language="javascript1.2">
var displayData=new Array(
new Array(’images/img1.jpg’,'Image 1′,1),
new Array(’images/img2.jpg’,'Image 2′,2),
new Array(’images/img3.jpg’,'Image 3′,3),
new Array(’images/img4.jpg’,'Image 4′,4),
new Array(’images/img5.jpg’,'Image 5′,5),
new Array(’images/img6.jpg’,'Image 6′,6)
);
</script>
<table>
<tr>
<td>
<img name=’holder’ style=’cursor:hand’ onclick=’onclickDisplay(this)’ border=’1′ width=’100px’ /><br />
<span class=’dispInfo’ style=’cursor:hand’ onclick=’onclickDisplay(this)’></span>
</td>
<td>
<img name=’holder’ style=’cursor:hand’ onclick=’onclickDisplay(this)’ border=’1′ width=’100px’ /><br />
<span class=’dispInfo’ style=’cursor:hand’ onclick=’onclickDisplay(this)’></span>
</td>
<td>
<img name=’holder’ style=’cursor:hand’ onclick=’onclickDisplay(this)’ border=’1′ width=’100px’ /><br />
<span class=’dispInfo’ style=’cursor:hand’ onclick=’onclickDisplay(this)’></span>
</td>
<td>
<img name=’holder’ style=’cursor:hand’ onclick=’onclickDisplay(this)’ border=’1′ width=’100px’ /><br />
<span class=’dispInfo’ style=’cursor:hand’ onclick=’onclickDisplay(this)’></span>
</td>
<td>
<img name=’holder’ style=’cursor:hand’ onclick=’onclickDisplay(this)’ border=’1′ width=’100px’ /><br />
<span class=’dispInfo’ style=’cursor:hand’ onclick=’onclickDisplay(this)’></span>
</td>
<td>
<img name=’holder’ style=’cursor:hand’ onclick=’onclickDisplay(this)’ border=’1′ width=’100px’ /><br />
<span class=’dispInfo’ style=’cursor:hand’ onclick=’onclickDisplay(this)’></span>
</td>
</tr>
</table>
<script language="javascript1.2">
startshow();
</script>
</body>
</html>
the code already tested using firefox 3.0.4 and ie 7, you can try these browser
no thing happens, script is not working