Home > JavaScript Blogger > Foto Slider
Demo :
Foto Slider  |
| |
Cara membuatnya Foto Slider
Dari Dashboard >> Design >> Edit HTML.
Penempatannya
dibawah <body>
........
diatas </body>
<table border="0" cellpadding="0">
<caption><strong>Foto Slider</strong></caption>
<tr>
<td width="100%"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3sFZyQeiUSfs6TJI0qwPLthazIB-dICeUN4coQmMIeyY4qF5nWyDjxAdtc9psfV9G1cCxwJrQ5wmSMdT2h0fKDveTs_860_4cjnj-pvjoJFuwF0f_faZNR6jQi9AAZlkX3TtB1QobTSC/s1600/city+data.jpg" width="300" height="240" name="photoslider"/></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p>
<script type='text/javascript'>
//<![CDATA[
var photos=new Array()
var which=0
/*Tempat Foto 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"
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
//]]>
</script>
<input type="button" value="Back" name="B2" onClick="backward()"/> <input type="button" value="Next" name="B1" onClick="forward()"/><br/>
<a href="#" onClick="which=1;backward();return false">Start Over</a></p>
</center></div>
</form>
</td>
</tr>
</table>
Credit : JavaScript Kit
Alhamdulillah
