JS:幻灯片显示结果不准确

JS: Slideshow inaccurate result

本文关键字：结果 不准确 显示 幻灯片 JS      更新时间：2023-09-26

嗨，我写这个简单的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>

是什么解决方案，使我的幻灯片将是准确的?

当鼠标在红色矩形内时，将暂停自动行为，一旦鼠标离开红色矩形，将继续在自动模式下运行。这些按钮当然可以正常工作。

   <!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>
相关文章：