Advanced Search

JQuery Slideshow

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">// <![CDATA[
  2. 		var TotalImages = 4;
  3. 	    var CurrentImage = 1;
  4. 		var divPrefix = 'photo_';
  5. 	    var TimerHandler = null;
  6. 	    /*
  7. 	    	<div style="width:320px; height:200px;>
  8. 	    	    <div id="photo_1" style="position:absolute; display:block;">
  9. 	    	        <img src="blah1.jpg" border="0" />
  10. 	    	    </div>
  11. 	    	    <div id="photo_2" style="position:absolute; display:none;">
  12. 	    	        <img src="blah2.jpg" border="0" />
  13. 	    	    </div>
  14. 	    	    <div id="photo_3" style="position:absolute; display:none;">
  15. 	    	        <img src="blah3.jpg" border="0" />
  16. 	    	    </div>
  17. 	    	    <div id="photo_4" style="position:absolute; display:none;">
  18. 	    	        <img src="blah4.jpg" border="0" />
  19. 	    	    </div>
  20. 	    	 </div>
  21. 	    */
  22. 	    function TimerShowNextImage(){
  23. 			$("#"+divPrefix+CurrentImage).fadeOut(600);
  24. 			if(CurrentImage==TotalImages)
  25. 		    	CurrentImage = 1;
  26. 			else
  27. 		    	CurrentImage+=1;
  28. 		    $("#"+divPrefix+CurrentImage).fadeIn(600);
  29. 	    }
  30.  
  31. 	    function ShowNextImage(){
  32. 			clearInterval(TimerHandler);
  33. 			$("#"+divPrefix+CurrentImage).fadeOut(600);
  34. 			if(CurrentImage==TotalImages)
  35. 		    	CurrentImage = 1;
  36. 			else
  37. 		    	CurrentImage+=1;
  38. 			$("#"+divPrefix+ssCurrentImage).fadeIn(600);
  39. 			TimerHandler = setInterval(TimerShowNextImage, 4000);
  40. 	    }
  41. 	    function ShowPrevImage(){
  42. 			clearInterval(TimerHandler);
  43. 			$("#"+divPrefix+CurrentImage).fadeOut(600);
  44. 			if(CurrentImage==1)
  45. 		    	CurrentImage = 4;
  46. 			else
  47. 		    	CurrentImage-=1;
  48. 			$("#"+divPrefix+CurrentImage).fadeIn(600);
  49. 			TimerHandler = setInterval(TimerShowNextImage, 4000);
  50. 	    }
  51. 	    $(function() {
  52. 			$( "#leftbtndiv" ).click(function() {
  53. 		    	ShowPrevImage();
  54. 		    	return true;
  55. 			});
  56. 			$( "#rightbtndiv" ).click(function() {
  57. 		    	ShowNextImage();
  58. 		    	return true;
  59. 			});
  60. 	    });
  61. 	    $(document).ready(function() {
  62. 			$("#"+divPrefix+CurrentImage).fadeIn(10);
  63. 			TimerHandler = setInterval(TimerShowNextImage, 4000);
  64. 	    });
  65. // ]]></script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.