Home > JavaScript Blogger > Foto Slider dengan teks keterangan
Demo :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Penempatannya
dibawah <body>
........
diatas </body>
<table border="0" cellpadding="0">
<tr>
<td width="100%"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3sFZyQeiUSfs6TJI0qwPLthazIB-dICeUN4coQmMIeyY4qF5nWyDjxAdtc9psfV9G1cCxwJrQ5wmSMdT2h0fKDveTs_860_4cjnj-pvjoJFuwF0f_faZNR6jQi9AAZlkX3TtB1QobTSC/s1600/city+data.jpg" width="400" height="264" name="photoslider"/></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center">
<script type='text/javascript'>
//<![CDATA[
/*
Foto Slider dengan teks keterangan By Kevin Adams (kadams@kyk.net)
*/
var photos=new Array()
var text=new Array()
var which=0
var what=0
//Ganti dengan URL gambar anda :
photos[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3sFZyQeiUSfs6TJI0qwPLthazIB-dICeUN4coQmMIeyY4qF5nWyDjxAdtc9psfV9G1cCxwJrQ5wmSMdT2h0fKDveTs_860_4cjnj-pvjoJFuwF0f_faZNR6jQi9AAZlkX3TtB1QobTSC/s1600/city+data.jpg"
photos[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7chsq9gpznyxVxFHTbp0_zjnNdvD_Udsdvu6rnryHv7ok7TiZ5FJ2MutmdYdVoBD7zvV2PXL0CIyVGxzt17ImkXL93GfiI-oXW3AQBuO7Yn1opwVYpbGLG7JSVJm8FpB8-CixIQhtPaHB/s1600/hiren.jpg"
photos[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONPNn7wt34HFR5afGwkhyphenhyphen68AFGEq5tto3QlnVL6a9aMwlgBuO1qd2AzzIp2H9f47j98uy3kYCjbrbJsNOpePCtVwHsfqifMSpHCYk68Aj60lcoJyjrZAWyLCpqY77qmaYBaJa3DP43tJF/s1600/singapore.jpg"
photos[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9oseo0i6bbCvqLBG0jU8AOifUFzVV8tBhcfZlAGpX0Y0qqEE8qfp6BkVi-3LNIqT9obMN8nhlyEQicCK14L6D5vsy3PLn0KjzzX7pRgsMryR2cMrb1ypWgTd6hVQy8s2nofHW1a_pMIN1/s1600/soutra.jpg"
photos[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHOeBo5dPWScq3Cu2QkiY7sQtmlYIg8cjWZn-P1L-KznXgppnKXU64T4C6_AuUFMqGNqawhn1M51dTR0_ntyCTDabuIjGC47P7SvFt1xACnBXjRIjHOlf0-8bTHDeew6NqTEWQUKH-RxIt/s1600/topix.jpg"
//Ganti dengan Deskripsi:
text[0]="Keterangan 1"
text[1]="Keterangan 2"
text[2]="Keterangan 3"
text[3]="Keterangan 4"
text[4]="Keterangan 5"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
//]]>
</script>
<p><input type="text" name="description" style="width:100%" size="50"/></p>
<p><input type="button" value="Back" name="B2"
onClick="backward()"/> <input type="button" value="Next" name="B1"
onClick="forward()"/><br />
<a href="#" onClick="which=1;what=1;backward();return false">Start Over</a></p>
</div>
</form>
</td>
</tr>
</table>
Credit : JavaScript Kit
Alhamdulillah
