Where can I find a simple jquery image slideshow tutorial for beginners from scratch (without plugins) without left and right navigation button?
thank you.
This is by far the easiest example I have found on the net. http://jonraasch.com/blog/a-simple-jquery-slideshow
Summaring the example, this is what you need to do a slideshow:
HTML:
<div id="slideshow">
<img src="img1.jpg" style="position:absolute;" class="active" />
<img src="img2.jpg" style="position:absolute;" />
<img src="img3.jpg" style="position:absolute;" />
</div>
Position absolute is used to put an each image over the other.
CSS
<style type="text/css">
.active{
z-index:99;
}
</style>
The image that has the class="active" will appear over the others, the class=active property will change with the following Jquery code.
<script>
function slideSwitch() {
var $active = $('div#slideshow IMG.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
If you want to go further with slideshows I suggest you to have a look at the link above (to see animated oppacity changes - 2n example) or at other more complex slideshows tutorials.