Adding Image Slideshow on any HTML Webpage / blogger site

A number of web developers face challenge in adding a simple image slideshow in a HTML webpage. There are very tough codes available on net for this task. But most of them demand images to be of same size, or the code is too tough to implement due to usage of css and advanced java script. Here we are proving a simple HTML code with minimal usage of Java script. You can directly use in it your blog post's HTML coding.


Here is the code

<script type="text/javascript">

var x=0;

function rotate(num){

fs=document.ff.slide;

x=num%fs.length;

if(x<0) x=fs.length-1;

document.images.show.src=fs.options[x].value;

fs.selectedIndex=x;}

function auto() {

if(document.ff.fa.value == "Stop"){

rotate(++x);setTimeout("auto()", 2000);}}

</script>

<form name="ff">

<table cellpadding=3 style="border:1px solid;border-collapse:collapse; border-color:#C0C0C0">

<tr><th align=center>Tourist Places in India</th>

</tr><tr><td align=center>

<img src="http://3.bp.blogspot.com/-c6ME9JjBFqE/V05yKvKEWcI/AAAAAAAABeQ/o0QbFk-uNqsqpyGLijCHjYLBWSvHDaGbgCK4B/s1600/shimla-manali.jpg" name="show">

</td></tr><tr>

<td align=center style="border:1px solid; border-color:#C0C0C0">

<input type="button" onclick="rotate(0);" value="ll<<" title="Jump to Start" />

<input type="button" onclick="rotate(x-1);" value="Previous " title="Previous photo" style="width:80px;" />

<input type="button" name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Start Slidshow" title="Auto-play" style="width:150px;" />

<input type="button" onclick="rotate(x+1);" value="Next" title="Next Photo" style="width:80px;" />

<input type="button" onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" />

</td></tr><tr>

<td align=center style="border:1px solid; border-color:#C0C0C0">

<select name="slide" onChange="rotate(this.selectedIndex);">

<option value="http://3.bp.blogspot.com/-c6ME9JjBFqE/V05yKvKEWcI/AAAAAAAABeQ/o0QbFk-uNqsqpyGLijCHjYLBWSvHDaGbgCK4B/s1600/shimla-manali.jpg">Shimla-Manali </option>

<option value="http://2.bp.blogspot.com/-wwR2GYF_vcU/V05yKpZjdOI/AAAAAAAABeI/CKcBZnJiaZwoyQHP9ouzgITMtITEWXtBwCK4B/s1600/darjeeling.JPG">Darjeeling</option>

<option value="http://2.bp.blogspot.com/--iF0Vt52pFY/V05yOuQLwMI/AAAAAAAABeg/DY5qW_wz9DQ8I54A8zMiNu1xHCHgk-IzgCK4B/s1600/corbett%2Bnational%2Bpark.jpg">Corbett National Park 

</option>

<option value="http://3.bp.blogspot.com/-3NVDB-uXGg8/V05yJw-HGvI/AAAAAAAABeA/5yBvqQ8lh9UabqFc9ZW5GnDXYtaGoyqcQCK4B/s1600/Lashmir.jpg">Kashmir </option>

<option value="http://3.bp.blogspot.com/-Le9xTT8kNX4/V05yJ1tjc4I/AAAAAAAABd4/LLn0cMS12V8eDLZG6LfXPwGpOO5LUFoRwCK4B/s1600/andaman.jpg">Andman </option>

<option value="http://2.bp.blogspot.com/-YOB8CX_LAPQ/V05yMzl-DPI/AAAAAAAABeY/sSQ8OAoxi6QpdnaG_HCKQb5fJMDLj8n3gCK4B/s1600/kerala.jpg">Kerala </option>

<option value="https://4.bp.blogspot.com/-sHkmhIIStg0/V06AQjS7fEI/AAAAAAAABes/vyPvWRgzRPExLIChlIp2uNOpM83rKBx5wCLcB/s1600/Tajmahal.jpg">Tajmahal </option>

<option value="http://4.bp.blogspot.com/-6FOi4fPieXs/V05yJoTBcII/AAAAAAAABdw/RvxusQLmtpc78-pePFph5U4F19uPN2otwCK4B/s1600/Goa.jpg">Goa </option>

<option value="http://3.bp.blogspot.com/--H_C2wMi8P4/V05yHGYK2iI/AAAAAAAABdo/Xxks3Zc5ljAOuRDSBJfT_9ZFSbnqaUE1QCK4B/s1600/Laddakh.jpg">Ladakh </option>

</select>

</td></tr></table>

 The implementation of the above code will provide the following result

Tourist Places in India
Shimla-Manali Darjeeling Corbett National Park Kashmir Andman Kerala Tajmahal Goa Ladakh

If you are smart enough to be a web developer, then you know how to change the code implement it on your website. You can add or delete images by adding or deleting the <option ></option> tag which is in the end part of the code.