<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Simple Slideshow </title> <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var currentPosition = 0; var slideWidth = 500; var slides = $('.slide'); var numberOfSlides = slides.length; setInterval(changePosition, 3000); slides.wrapAll('<div id="slidesHolder"></div>'); slides.css({ 'float': 'left' }); $('#slidesHolder').css('width', slideWidth * numberOfSlides); function changePosition() { if (currentPosition == numberOfSlides - 1) { currentPosition = 0; } else { currentPosition++; } moveSlide(); } function moveSlide() { $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) }); } }); </script> <style type="text/css"> #slideshow #slideshowWindow { width:500px; height:257px; margin:0; padding:0; position:relative; overflow:hidden; } #slideshow #slideshowWindow .slide { margin:0; padding:0; width:500px; height:257px; float:left; position:relative; } </style> </head> <body> <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"><b>Welcome to SlideShow Image1</b> <img src="https://lh5.googleusercontent.com/-YRAs5XWsj3k/UROnzTJcTrI/AAAAAAAAD98/UIRWUOOwbsY/s450/SaveWater.jpg" /> </div> <div class="slide"><b>Welcome to SlideShow Image2</b><img src="https://lh3.googleusercontent.com/-CWFgJqYK0lo/UROnzXcKNiI/AAAAAAAAD94/H3zWwqQ03xk/s300/Hopetoun_falls2.jpg" /> </div> <div class="slide"><b> SlideShow Image3</b><img src="https://lh3.googleusercontent.com/-_tRUTe8jkiY/UROnzYKamnI/AAAAAAAAD-A/PBWOsc1ZrXg/s300/slideshowImage.jpg" /> </div> </div> </div> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)