This is simple image slider that change images/banners with fade effect in declared interval.
HTML:
<div class="swrapper"> |
|
<div id="slider"> |
|
<a href="#" target="_blank"><img id="1" src="baner_new_site_bg.png"></a> |
|
<a href="#" target="_blank"><img id="2" src="banner.png"></a> |
|
</div> |
|
</div> |
Code after including jQuery library:
<!-- HEADER SLIDER --> |
|
<script> |
|
jQuery(function () { |
|
var count = jQuery("#slider > a > img").length; |
|
var slider = 1; |
|
var speed=7000; |
|
var fadeSpeed = 300; |
|
var loop; |
|
start(); |
|
|
|
|
jQuery("#1").fadeIn(fadeSpeed); |
|
jQuery('#slider').hover(stop,start); |
|
|
|
|
function start(){ |
|
loop = setInterval(next, speed); |
|
} |
|
|
|
|
function stop(){ |
|
clearInterval(loop); |
|
} |
|
|
|
|
function next() { |
|
slider++; |
|
if (slider > count) { |
|
slider = 1; |
|
} |
|
|
|
|
jQuery("#slider > a > img").fadeOut(fadeSpeed); |
|
jQuery("#" + slider).fadeIn(fadeSpeed); |
|
} |
|
}); |
|
</script> |
|
<style> |
|
.swrapper { position:relative; } |
|
#slider { height:200px;} |
|
#slider img { width:966px; height:149px; display:none; position:absolute;} |
|
</style> |
|
<!-- END HEADER SLIDER --> |
Keep in mind that if you need more images, you will need to put ID on them too. Otherwise they will not show.
For my task I just needed simple image changer. You can easily modify it to a real slideshow slider with navigation or something similar.