CODEWITHSUNDEEP
javascripthtmlimage
user3641776
user3641776

Reputation: 21

Image Slider using HTML

I am creating a simple Image slider using HTML and Javascript. I have done this following still my Images are not changing. Please help me with a correction.

<script type="text/javascript">
var i=0;
var pic=new array()
pic[0].src='scks/0.jpg'
pic[1].src='scks/1.jpg'
pic[2].src='scks/2.jpg'
pic[3].src='scks/3.jpg'
pic[4].src='scks/4.jpg'

function prev()
{
    i--;
    if(i==(-1))
        i=4;
    document.images.slidre.src = eval("pic"+i+".src");
}
function next()
{
    i++;
    if(i==5)
        i=0;
    document.images.slidre.src = eval("pic"+i+".src");  
}
</script>
<table style="border:thin green solid" width="400px" align="center">
    <tr>
        <td style="border:thin lime solid"><img src="scks/0.jpg" width="400px" height="300px" name="slidre"/>
        </td>
    </tr>
    <tr>
        <td style="border:thin lime solid">
        <span onclick="prev()" style="float:left">Prev</span>
        <span onclick="next()" style="float:right">Next</span></td>
    </tr>
</table>

Thanks

Upvotes: 1

Views: 214

Answers (2)

K.K.Agarwal
K.K.Agarwal

Reputation: 856

modify your function

 var i=0;
var pic = new Array()
pic[0]='scks/0.jpg'
pic[1]='scks/1.jpg'
pic[2]='scks/2.jpg'
pic[3]='scks/3.jpg'
pic[4]='scks/4.jpg'
alert(pic.length)
function prev()
{

    i--;
    if(i==(-1))
        i= pic.length;
    document.images.slidre.src = pic[i];
}
function next()
{
    i++;
    if(i==pic.length)
        i=0;
    document.images.slidre.src =  pic[i] ;  
}

Upvotes: 0

Kevin Sandow
Kevin Sandow

Reputation: 4033

First error would be your array initialization, secondly your filling objects in your array, just insert the src to your images directly.

Final remark: you shouldn't use eval to get an array element. Code should look like this:

<script type="text/javascript">
var i=0;
var pic=new Array(5);
pic[0]='scks/0.jpg';
pic[1]='scks/1.jpg';
pic[2]='scks/2.jpg';
pic[3]='scks/3.jpg';
pic[4]='scks/4.jpg';

function prev()
{
    i--;
    if(i==(-1))
        i=4;
    document.images.slidre.src = pic[i];
}
function next()
{
    i++;
    if(i==5)
        i=0;
    document.images.slidre.src = pic[i];  
}
</script>
<table style="border:thin green solid" width="400px" align="center">
    <tr>
        <td style="border:thin lime solid"><img src="scks/0.jpg" width="400px" height="300px" id="slidre"/>
        </td>
    </tr>
    <tr>
        <td style="border:thin lime solid">
        <span onclick="prev()" style="float:left">Prev</span>
        <span onclick="next()" style="float:right">Next</span></td>
    </tr>
</table>

Upvotes: 1

Related Questions