javascript slideshow

what should be the code for start and stop button of a slideshow in javascript without using jquey ,ajax . and how to make a thumbnail highlighted on clicking the previous and next buttons??

<html>
<head>
<title></title>
<style type="text/css">

#a
{
	text-align:center;
    color:#0000CD;
    
    
}

#dv1
{
     border-style:	
}



</style>

<script type="text/javascript" language="javascript">

 function showLarge(srcLarge,color) 
 {     
    document.getElementById("large").src = srcLarge;
    document.getElementById("large").style.borderColor= color;
   
 } 
 
 function Border_Change()
 {
    document.getElementById("large").style.borderColor="gray";
 }
 
 
var imgs = new Array(); 
var imgcnt = 0; 
var thisimg = 0;
var color=0;

imgs[imgcnt++] = 'images/gateway_of_india.jpg';
imgs[imgcnt++] = 'images/hanging_gardens.jpg';
imgs[imgcnt++] = 'images/the_taj_palace.jpg';
imgs[imgcnt++] = 'images/Victoria_Terminus.jpg';

function nextImg() 
{
    if (document.images) 
    {
        thisimg++;
        if (thisimg >= imgcnt) 
       
            thisimg = 0;
            document.slideshw.src = imgs[thisimg]; 
      
    }
}
function prevImg() 
{
    if (document.images) 
    {
        thisimg--;
        if (thisimg < 0) 
            thisimg = imgcnt-1;
            document.slideshw.src = imgs[thisimg];
    }
} 
//var slideShowSpeed = 4000;
//var crossFadeDuration = 3;
//var Pic = new Array();
//Pic[0]= 'images/gateway_of_india.jpg'
//Pic[1]= 'images/hanging_gardens.jpg'
//Pic[2]= 'images/the_taj_palace.jpg'
//Pic[3]= 'images/Victoria_Terminus.jpg'


//var t;

//var j = 0;

//var p = Pic.length;
//var preLoad = new Array();

//for (i = 0; i < p; i++) 
//{
//preLoad[i] = new Image();
//preLoad[i].src = Pic[i];
//}

//{

//function runSlideShow() 
//{
//if (document.all) 
//{
//document.images.SlideShow.style.filter="blendTrans(duration=2)";
//document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
//document.images.SlideShow.filters.blendTrans.Apply();

//}

//document.images.SlideShow.src = preLoad[j].src;


//if (document.all) 
//{
//document.images.SlideShow.filters.blendTrans.Play();

//}

//j = j + 1;


//if (j > (p - 1)) 
//j = 0;
// 


//t = setTimeout('runSlideShow()', slideShowSpeed);
//}


</script>   
 
 
</head>
<body>

<table width="1000" height="400" border="0">
<tr>

<td style="background-color: #87CEFA; height:400px; text-align:center">
<button type="button" id="play" onclick="runSlideShow()">Play</button>
<button id="btn1" name="btn1" value="<" onclick="prevImg() ">
    <img src="images/PNG/Back%20Button_256.png" style="size:5px" />
</button>
<img src="images/gateway_of_india.jpg" alt="Mumbai darshan" id="large" height="300" width="400" 
    onmouseover="Border_Change()" style="border:solid 10px; text-align:center;" 
    name="slideshw" />
<button id="btn2" name="btn2" value=">" onclick="nextImg('images/gateway-of-india.jpg') " >
<img src="images/PNG/Button-Next.png" /></button><button type="button" id="stop" onclick="stop()">Pause</button>


</td>

</tr>

<tr>
<td id= "img" style="background-color:#FF7F50; border-style:solid; text-align:center;"><h1 id="a">Mumbai Attractions!!</h1>
<img src="images/gateway-of-india.jpg" alt="gateway-of-india" style="border:10px; border-style:solid; border-color:Blue;" onclick="showLarge('images/gateway_of_india.jpg','blue')" />
<img src="images/the-hanging-gardens-malabar.jpg" alt="the-hanging-gardens-malabar"  style="border:10px; border-style:solid; border-color:Green;" onclick="showLarge('images/hanging_gardens.jpg','green','images/the-hanging-gardens-malabar.jpg')"/>
<img src="images/the-taj-palace.jpg" alt="the-taj-palace"  style="border:10px; border-style:solid; border-color:Yellow;" onclick="showLarge('images/the_taj_palace.jpg','yellow','images/the-taj-palace.jpg')"/>
<img src="images/victoria%20terminus.bmp" alt="victoriaTerminus"  style="border:10px; border-style:solid; border-color:Red;" onclick="showLarge('images/Victoria_Terminus.jpg','red','images/victoria%20terminus.bmp')" />
</td>
</tr>

</table>

</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:

Select all Open in new window

Replies

by: mplungjan

Posted on 2012-01-24 at 11:54:22ID: 37489123

All comments and solutions are available to Premium Service Members only. Sign up to view the solution to this question. Already a member? Log in to view this solution.

Question

javascript slideshow

Related Solutions

Replies

Log In

Top Experts