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>
Comments
Post a Comment