JS：幻灯片显示不准确的结果

Question

嗨，我写了这个简单的 javascript 幻灯片，因为我想在 javascript 中编写自己的幻灯片。它会按设定的时间间隔自动更改图像。但是当我尝试点击后退和前进功能时，结果不准确或者图像是有序的。

 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>

有什么解决方案可以使我的幻灯片放映准确无误？

Answer 1

这将在鼠标位于红色矩形内时暂停自动行为，并在鼠标离开红色矩形时继续自动模式。按钮当然按预期工作。

   <!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>

JS：幻灯片显示不准确的结果

JS: Slideshow inaccurate result

html

javascript

slideshow