javascript - JS: Slideshow inaccurate result -
hi write simple javascript slideshow cause want write own slideshow in javascript. automatically change images set time interval. when try click backward , forward function result not accurate or images 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 = 0; var count = images.length; function slidingimages() { i = % count; document.banner.src = images[i]; i++; } function forward() { = (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="«prev" onclick="backward()"> <input type="button" value="next»" onclick="forward()"> </center>
what solution slideshow accurate?
this pause automatic behavior when mouse within red rectangle , continue in auto mode once mouse out of red rectangle. buttons of course work 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 = -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 && < 2) { += 1; } else { = 0; } document.banner.src=images[i]; } function rev() { if (i > 0 && <= 2) { -= 1; } else { = 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>
Comments
Post a Comment