Search code examples
htmlcontrolsslideshowplayback

Slideshow Control Action

I'm trying to put an control for my slideshow images.Beside autoplay i need a "Next" and "Previous" button to cross over images faster if i want to.

Here is my code until now. Please help . Thanks ! 

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/head/facebook.png"
var image2 = new Image()
image2.src = "img/head/mess.png"
var image3 = new Image()
image3.src = "img/head/skype.png"
var image4 = new Image()
image4.src = "img/head/twitter.png"
</script>
</head>
<body>
<p><img src="img/head/facebook.png" width="39" height="45" name="slide" /></p>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<4)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>
Solution

  • Place the following code:

    HTML

    <a href="#" name="pre">Previous</a>
<a href="#" name="nex">Next</a>

    JAVASCRIPT

    $(document).ready(function() {
$("#nex").click(function(){
document.images.slide.src = eval("image"+step+".src");
            if(step<4)
                step++;
            else
                step=1;
});
$("#pre").click(function(){
step--;
if(step=1)
step=4;
document.images.slide.src = eval("image"+step+".src");
            });
});