jquery - setInterval in slide show -
there many free slide show , plugins in internet. want design slide show pure javascript without framework or plugins. want simple slide show light weight , fast load. have problem in it.please me ferinds. don't want save image's name in array. problems are:
javascript events don't work in of browsers forexample
onmouseout
,onmouseover
.i want stop sliding when mouse moves on element , when mouse moves out of element slide autoplay again.but in slideshow when mouse moves on
div#slider-display
,slideshow doesn't stop , when mouse moves out,slideshow plays faster previous!why?!
3.how change use javascript without jquery? js file:
var imageul=document.getelementbyid("slider-gallery"); var images=imageul.getelementsbytagname("img"); var imageindex = 0; function changeimage() { imageindex++; if (imageindex >= images.length) { imageindex = 0; } $("#slider-display").empty(); var mainimage=document.createelement("img"); mainimage.setattribute("src",images[imageindex].getattribute("src")); document.getelementbyid('slider-display').appendchild(mainimage); } var intervalhandle = setinterval(changeimage,2000); /*document.getelementbyid('slider-display').onmouseout = function() { var intervalhandle = setinterval(changeimage,2000); }; document.getelementbyid('slider-display').onmouseover = function() { clearinterval(intervalhandle); };*/ $("#slider-display").mouseout(function(){ var intervalhandle = setinterval(changeimage,2000); }); $("#slider-display").hover(function(){ clearinterval(intervalhandle); });
html file:
<div id="slider"> <div id="slider-display"> </div> <div id="slider-gallery" style="display:none;"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> </div> <div id="slider-buttons"> <img id="slider-btn-prev" src="img/media_skip_backward.png" /> <img id="slider-btn-next" src="img/media_skip_forward.png" /> </div> </div>
Comments
Post a Comment