<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="next-prev.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> var imgFirst = $('#img-grp-wrap .img-wrap img:first-child'); $('#img-grp-wrap .img-wrap img:gt(0)').hide(); function slideShow() { imgFirst.fadeOut().next('img').fadeIn().end().appendTo('.img-wrap'); } var rotate = setInterval(function() { slideShow(); }, 4000); $('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() { clearInterval(rotate); }, function() { var rotate = setInterval(function() { slideShow(); }, 4000); }); $('#img-grp-wrap .next').click(function() { imgFirst.stop().fadeOut().next().fadeIn().end().appendTo('.img-wrap'); }); $('#img-grp-wrap .prev').click(function() { imgFirst.stop().fadeOut(); $('#img-grp-wrap .img-wrap img:last-child').prependTo('.img-wrap').fadeOut(); imgFirst.fadeIn(); }); </script> </head> <body> <div id="img-grp-wrap"> <div class="img-wrap"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> </div> <img src="arrowright.jpg" class="next" alt="Next"/> <img src="arrowleft.jpg" class="prev" alt="Previous"/> </div> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
Submit an article or tip