html - Three javascript functions on one single page - disfunctional -


my first post here let's this. have single page website 3 image sliders on each div. 1 div after other:

<script type="text/javascript"> var imagecount = 1; var total = 3; function slide(x) { var image = document.getelementbyid('img'); imagecount = imagecount + x; if(imagecount > total){ imagecount = 1;} if(imagecount < 1){ imagecount = total;} image.src = "img/slide1/img"+ imagecount +".jpg"; } </script>  <script type="text/javascript"> var imagecount = 1; var total = 3; function slide(x) { var image = document.getelementbyid('img2'); imagecount = imagecount + x; if(imagecount > total){ imagecount = 1;} if(imagecount < 1){ imagecount = total;} image.src = "img/slide2/comd"+ imagecount +".jpg"; } </script> 

because have added code too, navigation buttons on first don't work first div second one.

html:

<div id="main-content"> 

<div id="container">     <img src="img/slide1/img1.jpg" id="img">     <div id="left_holder"> <img onclick="slide(-1)" class="left" src="img/slide1/leftandright/leftred_up.png" onmouseover="this.src='img/slide1/leftandright/leftred_over.png'" onmouseout="this.src='img/slide1/leftandright/leftred_up.png'"> </div>     <div id="right_holder"> <img onclick="slide(1)" class="right" src="img/slide1/leftandright/rightred_up.png" onmouseover="this.src='img/slide1/leftandright/rightred_over.png'" onmouseout="this.src='img/slide1/leftandright/rightred_up.png'"> </div> </div> 

html second js function:

<div id="main-content2"> 

<div id="container">     <img src="img/slide2/comd1.jpg" id="img2">     <div id="left_holder"> <img  onclick="slide2(-1)" class="left" src="img/slide2/leftandright/leftorn_up.png" onmouseover="this.src='img/slide2/leftandright/leftorn_over.png'" onmouseout="this.src='img/slide2/leftandright/leftorn_up.png'"> </div>     <div id="right_holder"> <img onclick="slide2(1)" class="right" src="img/slide2/leftandright/rightorn_up.png" onmouseover="this.src='img/slide2/leftandright/rightorn_over.png'" onmouseout="this.src='img/slide2/leftandright/rightorn_up.png'"> </div> </div> 

i'll replying rapidly responses if have ask go ahead!

be gentle please

function slideshow(element,count) {     var imagecount = parseint( element.parentnode.parentnode.getattribute("data-current"), 10);     var total = parseint( element.parentnode.parentnode.getattribute("data-count"), 10);         var image = element.parentnode.parentnode.getelementsbytagname("img");         imagecount = imagecount + count;         element.parentnode.parentnode.setattribute("data-current",imagecount);         if(imagecount > total){             imagecount = 1;            element.parentnode.parentnode.setattribute("data-current",imagecount);         }else if(imagecount < 1){             imagecount = total;            element.parentnode.parentnode.setattribute("data-current",imagecount);         }          image.src = "img/slide1/img"+ imagecount +".jpg";  } 

now html

<div id="slide_show_1" data-count="3" data-current="1">     <img src="img/slide1/img1.jpg" id="img">     <div id="left_holder">          <img onclick="new slideshow(this,1)" class="left" src="img/slide1/leftandright/leftred_up.png" onmouseover="this.src='img/slide1/leftandright/leftred_over.png'" onmouseout="this.src='img/slide1/leftandright/leftred_up.png'">      </div>     <div id="right_holder">          <img onclick="new slideshow(this,1)" class="right" src="img/slide1/leftandright/rightred_up.png" onmouseover="this.src='img/slide1/leftandright/rightred_over.png'" onmouseout="this.src='img/slide1/leftandright/rightred_up.png'">      </div> </div> 

demo http://jsbin.com/bejozuquqo/1/edit


Comments

Popular posts from this blog

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

java - Could not locate OpenAL library -

sorting - opencl Bitonic sort with 64 bits keys -