Javascript Jquery slideshow -
what code in jquery let in slideshow make first photo appear after clicking next when on last photo. know need write once document ready didnt yet will. here code
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="slides.min.jquery.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(document).ready(function() { $("#links").mouseover(function() { $("#links").animate({ 'opacity': '1' }); }); }); $(document).ready(function() { $("#links").mouseout(function() { $("#links").animate({ 'opacity': '0' }); }); }); $(document).ready(function() { $("#rechts").mouseover(function() { $("#rechts").animate({ 'opacity': '1' }); }); }); $(document).ready(function() { $("#rechts").mouseout(function() { $("#rechts").animate({ 'opacity': '0' }); }); }); $(document).ready(function() { $("#links").click(function() { $("#slider").animate({ left: '+=600px' }, 1000); }); }); $(document).ready(function() { $("#rechts").click(function() { $("#slider").animate({ left: '-=600px' }, 1000) }); }); </script> <meta charset="utf-8"> <title>slideshow</title> <style type="text/css"> #holder { height: 400px; width: 600px; margin-right: auto; margin-left: auto; overflow: hidden; position: relative; } #slider { height: 400px; width: 2500px; position: relative; z-index: 1; float: left; } #slider img { margin:0px; } #holder #rechts { height: 100px; width: 50px; position: absolute; z-index: 10; left: 550px; top: 0px; opacity: 0; padding-top: 150px; cursor:pointer; } #holder #links { height: 100px; width: 50px; padding-top: 150px; position: absolute; z-index: 10; left: 0px; cursor:pointer; opacity:0 } </style> </head> <body> <h1><center>dit mijn opdracht van dieter(slideshow)</center></h1> <div id="holder"> <div id="slider"> <img src="images/auto1.jpg" width="600" height="400"> <img src="images/auto2.jpg" width="600" height="400"> <img src="images/auto3.jpg" width="600" height="400"> <img src="images/auto4.jpg" height="400" width="600" /> </div> <div id="rechts"> <img src="images/pijlrechts.png" width="50" height="100" /> </div> <div id="links"> <img src="images/pijllinks.png" width="50" height="100" /> </div> </div> </div> </body> </html>
you should check whether element has sibling towards 1 side, can done $('element').nextall().length > 0
or $('element').prevall().length > 0
veel succes :) looking for?
Comments
Post a Comment