CODEWITHSUNDEEP
javascripthtmlslideshow
Lutianna
Lutianna

Reputation: 543

JS: Slideshow inaccurate result

Hi I write this simple javascript slideshow cause I want to write my own slideshow in javascript. It automatically change the images by a set time interval. But when I try to click the backward and forward function the result is not accurate or the images are in order.

	var images = ["http://i1214.photobucket.com/albums/cc487/myelstery/1.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/2.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/3.jpg"];

	var i = 0;
	var count = images.length; 
	
	function slidingImages() 
	{
			i = i % count;
			document.banner.src = images[i];
			i++;
	}
	
	function forward()
	 {
		 i = (i + 1) % count;
		 document.banner.src=images[i];
	 }
	 
	function backward() 
	{
		if (i <= 0) 
		{
			i = count - 1;
		} 
		else 
		{
			i--;
		}
		document.banner.src=images[i];
	}
	 
	window.onload = function() 
	{
	  slidingImages(),setInterval(slidingImages, 3000)
	};	
<center>
<p>
<img src="images/1.jpg" name="banner" id="name"/>
</p>
<input type="button" value="&laquo;prev" onClick="backward()"> 
<input type="button" value="next&raquo;" onClick="forward()">
</center>

What is the solution so my slideshow would be accurate?

Upvotes: 1

Views: 49

Answers (1)

zer00ne
zer00ne

Reputation: 44098

This will pause the automatic behavior when the mouse is within the red rectangle and continue in auto mode once the mouse is out of the red rectangle. The buttons of course work as expected.

   <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    fieldset { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; border: 1px solid red; }
    </style>
    </head>
    <body>
    <section>
      <p>
        <img src="images/1.jpg" name="banner" id="name"/>
      </p>
      <fieldset id="control">
      <input id="prev" type="button" value="◄">
      <input id="next" type="button" value="►">
      </fieldset>
    </section>
    <script>
     var images = ["http://i1214.photobucket.com/albums/cc487/myelstery/1.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/2.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/3.jpg"];

            var i = -1;
            var count = images.length; 
            var prev = document.getElementById('prev');
                var next = document.getElementById('next');
                var control = document.getElementById('control');
                var autoSlide;


            window.onload = auto;
                function auto() {
              autoSlide = setInterval(fwd, 3000)        };
                function pause() {
                    clearInterval(autoSlide);
                }

            function fwd() {

                if (i >= 0 && i < 2) 
                {
                    i += 1;
                } 
                else 
                {
                    i = 0;
                }
                document.banner.src=images[i];
            }

            function rev() {

                if (i > 0 && i <= 2) 
                {
                    i -= 1;
                } 
                else 
                {
                    i = 2;
                }
                document.banner.src=images[i];
            }

                prev.addEventListener('click', function() {

                    rev();
                }, false);

                next.addEventListener('click', function() { 
                  fwd();
                }, false);

                control.addEventListener('mouseover', function() {

                    pause();
                }, false);

                control.addEventListener('mouseout', function() { 
                  auto();
                }, false);


                </script>
    </body>
    </html>

Upvotes: 1

Related Questions