BestSites.ro

1. CSS

.homepage_slideshow{
    color:white;
    height:350px;
    width:920px;
    margin:8px auto 0 auto;
    position:relative;
}
.homepage_slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:9999;
}
.homepage_slideshow .selector {
    position:absolute;
    bottom:0;
    height:20px;
    width:100%;
    text-align: center;
    color:black;
    z-index:9999;
    font-family:arial,sans-serif;
    font-size: 16px;
    font-weight: bold;
}
.homepage_slideshow .selector a{
    color:black;
}

2. jQuery

$(document).ready( function (){
        // no of images
        var L = 2;
        // delay
        var D = 3000;
        // item
        var I = 1;
        var Loop = setInterval('changeImage()', D);
        var First = true;
        changeImage = function(){

            if (First){
                $('.homepage_slideshow .selector:last').html(selector);
                First = false;
            }

            if (I==null) I = 0;
            $('.homepage_slideshow #slide_'+I).animate({opacity: 0.0}, 1000);
            $('.homepage_slideshow #slide_'+((I==L)?0:(I+1))).animate({opacity: 1.0}, 1000);
            $('.homepage_slideshow #select_'+I).css('text-decoration', 'underline');
            $('.homepage_slideshow #select_'+((I==L)?0:(I+1))).css('text-decoration', 'none');

            I = ((I==L)?0:(I+1));
        }
        forceItem = function(C){
            clearInterval(Loop);
            $('.homepage_slideshow #select_'+I).css('text-decoration', 'underline');
            $('.homepage_slideshow #select_'+C).css('text-decoration', 'none');
            $('.homepage_slideshow #slide_'+I).animate({opacity: 0.0}, 10);
            $('.homepage_slideshow #slide_'+C).animate({opacity: 1.0}, 10);
            I = C;
            Loop = setInterval('changeImage()', D);
        }

        var selector = '';
        $('.homepage_slideshow IMG').each(
            function(index, element){
                selector += ''+index+' ';
            }
        );

        $('.homepage_slideshow .selector:last').html('Loading...');
    });

3. HTML

Posted by Dan | Posted in Scripts | No Comments

Tags: CSS, Javascript, jQuery, slideshow