SlideShow con JQuerry

Max 1 · 29 Feb 2012

Buona sera a tutti!

Sono un nuovo registrato e vorrei porre subito un quesito.
Ho la seguente pagina web con uno script che si appoggia a JQuerry, lo script attiva uno slideshow di 7 immagini, il mio problema che non riesco a risolvere è che vorrei far fermare lo slideshow alla 7° immagine per un determinato tempo e trascorso questo tempo riprendere lo slide dall'inizio.
Posto qui il codice:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>logo</title>

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {        
    
    //Execute the slideShow
    slideShow();

});

function slideShow() {

    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});
    
    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.0});
    
    //Set the caption background to semi-transparent
    $('#gallery .caption').css({opacity: 0.7});

    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
    
    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);
    
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',3000);
    
}

function gallery() {
    
    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

    
    //Get next image caption
    var caption = next.find('img').attr('rel');    
    
    
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
    

    
    
}



</script>
<style type="text/css">
body{
    font-family:arial
}

.clear {
    clear:both
}

#gallery {
    position:absolute;
    height:112px;
    top: 0px;
    left: 0px;
    margin: 0 auto;
    padding: 0; 
}
    #gallery a {
        float:left;
        position:absolute;
    }
    
    #gallery a img {
    position:absolute;
    border: none;
    margin: 0px;
    top: 0px;
    left: 0px;
    padding: 0px;
    }
    
    #gallery a.show {
        margin: 0 auto;
        top: 0px;
        left: 0px;
    }
    

</style>
</head>
<body>
<div id="gallery">

    <a href="#" class="show">
        <img src="images_logo/img_00.jpg" alt="" width="412" height="112" title="" rel="" />
    </a>
    
    <a href="#">
       <img src="images_logo/img_01.jpg" alt="" width="412" height="112" title="" rel="" />
    </a>
    
    <a href="#">
        <img src="images_logo/img_02.jpg" alt="" width="412" height="112" title="" rel="" />
    </a>
    
    <a href="#">
        <img src="images_logo/img_03.jpg" alt="" width="412" height="112" title="" rel="" />
    </a>

    <a href="#">
        <img src="images_logo/img_04.jpg" alt="" width="412" height="112" title="" rel="" />
    </a>
    
    <a href="#">
        <img src="images_logo/img_05.jpg" alt="" width="412" height="112" title="" rel="" />
    </a>
    
    <a href="#">
        <img src="images_logo/img_06.jpg" alt="" width="412" height="112" title="" rel="" />
    </a>
    
</div>



</body>
</html>

Grazie

Ciao

:byebye:

Cerca

Cerca

SlideShow con JQuerry

Max 1

Super Moderatore

Discussioni simili