i've been trying create slideshow can changed radio (or practically, kind) buttons. i've gotten slideshow work, can seen here, however, when try add buttons equation, whole thing breaks. right showing me final picture, fades penultimate picture. here function employing.
$(function () { "use strict"; setinterval(function(){rotateimages()}, 4000); var pic1 = $('#slideshow div:first'); var pic2 = $('#slideshow div:nth-child(2)'); var pic3 = $('#slideshow div:nth-child(3)'); var pic4 = $('#slideshow div:nth-child(4)'); var pic5 = $('#slideshow div:last'); $("#choosepic1").click(rotateimages(pic1)); $("#choosepic2").click(rotateimages(pic2)); $("#choosepic3").click(rotateimages(pic3)); $("#choosepic4").click(rotateimages(pic4)); $("#choosepic5").click(rotateimages(pic5)); }); function rotateimages(manualchange) { var currentphoto = $('#slideshow .current'); if (manualchange !== null) { currentphoto = manualchange; } var nextphoto = currentphoto.next(); if (nextphoto.length === 0) { nextphoto = $('#slideshow div:first'); } currentphoto.removeclass('current').addclass('previous'); nextphoto.css({ opacity: 0.0 }).addclass('current') .animate({ opacity: 1.0 }, 1000, function () { currentphoto.removeclass('previous'); }); } i've left css , html accompaniments on jsfiddle, can seen here.
why when add buttons whole function break?
i think idea show corresponding image based on click. doing is, setting manual selection current image whereas should've set next image that's what's going shown per logic.
you replace setinterval settimeout ensures animation complete before next queue starts.
to check if param passed function, simpy if (param) opposed if (param !== null)
you must check existense of element via .length if it's not necessary in case have proper mapping between images , buttons.
the important bits are:
user experience: whenever need interrupt auto played animation based on set interval, clear interval. if don't, it's going bad experience auto play keep going if 1 doesn't want whole point of manual intervention see specific image!
code optimization: jquery/javascript provides ways minimize code thru various in-built methods. make use of them reduces lines of code write , makes easier manage in future. i've done click bit demo. sure there more in snippet.
take @ amended code below.
$(function () { "use strict"; var timer = setinterval(rotateimages, 2000); $(".buttons").on("click", ".slideshowselect", function() { clearinterval(timer); var photoindex = parseint($(this).val(), 10) - 1; rotateimages( $('#slideshow div').eq(photoindex) ); //give option user thru button resume auto play //or resume auto play after set amount of time settimeout(function() { timer = setinterval(rotateimages, 2000); }, 5000); }); function rotateimages(manualchange) { var currentphoto = $('#slideshow .current'); var nextphoto = currentphoto.next(); if (manualchange && manualchange.length) { nextphoto = manualchange; } if (nextphoto.length === 0) { nextphoto = $('#slideshow div:first'); } currentphoto.removeclass('current').addclass('previous'); nextphoto.css({ opacity: 0.0 }).addclass('current') .animate({ opacity: 1.0 }, 1000, function () { currentphoto.removeclass('previous'); }); } });#slideshow div { z-index: 0; position: absolute; } #slideshow div.previous { z-index: 1; } #slideshow div.current { z-index: 2; } .slideshowselect { height:22px; width: 22px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slideshow"> <span class="buttons"> <input type="button" class="slideshowselect" value="1" /> <input type="button" class="slideshowselect" value="2" /> <input type="button" class="slideshowselect"value="3" /> <input type="button" class="slideshowselect" value="4" /> <input type="button" class="slideshowselect" value="5" /> </span> <div class="current"> <img src="http://www.butterfly-tattoo-design.com/butterfly-tattoos-6926.jpg" alt="img" width="300" /> </div> <div> <img src="http://www.serendipitystamps.com/mm5/pics/stamps/1255floralbutterflystamp.gif" alt="img" width="300" /> </div> <div> <img src="http://images.clipartpanda.com/free-butterfly-clipart-rcgjar7cl.jpeg" alt="img" width="300" /> </div> <div> <img src="http://www.cgvector.com/wp-content/uploads/2011/04/vector_butterfly_000018.jpg" alt="img" width="300" /> </div> <div> <img src="http://www.weddingchaos.co.uk/images-content/animals/butterfly.jpg" alt="img" width="300" /> </div> </div>
Comments
Post a Comment