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:

  1. javascript events don't work in of browsers forexample onmouseout , onmouseover.

  2. 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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

keyboard - C++ GetAsyncKeyState alternative -

android - java.net.UnknownHostException(Unable to resolve host “URL”: No address associated with hostname) -