Logique pour le diaporama JQuery

Je souhaite implémenter un diaporama vertical à l'aide de JQuery. J'utilise une bobine verticale (div) qui à son tour contient des images une par une je décrémente la bobine la position supérieure par taille d'image toutes les 2 secondes qui fonctionne bien mais quand j'atteins la dernière image je ne suis pas capable de mettre en œuvre logique pour démarrer la bobine à partir des premières images. si mon explication est clair que je suis AJOUT DE mon code:Logique pour le diaporama JQuery

<script type="text/javascript"> 
    $(function() { 
     setInterval(SlideImage, 2000); 
    }); 

    function SlideImage() { 
     $("#imgReel").animate({ "marginTop": "-=300px" }, 1000, function() { }); 
    } 
</script> 

<style type="text/css"> 
    img 
    { 
     width: 600px; 
     height: 300px; 
    } 
    .imgContainer 
    { 
     overflow: hidden; 
     width: 620px !important; 
     height: 300px !important; 
    } 
    div 
    { 
     width: 620px; 
    } 
    .current 
    { 
     z-index: 0; 
    } 
    .next 
    { 
     z-index: 1; 
    } 
    .imgReel 
    { 
     width: 620px !important; 
    } 
    . 
</style>

<body> 
<div id="imgContainer" class="imgContainer"> 
    <div id="imgReel" class="imgReel"> 
     <div class="current"> 
      <img src="Images/Summerwave.jpg" /> 
     </div> 
     <div> 
      <img src="Images/Sunlight_and_the_Wild_Forest_Floor.jpg" /> 
     </div> 
     <div> 
      <img src="Images/Sunset.jpg" /> 
     </div> 
     <div> 
      <img src="Images/Swimming_with_the_fishys.jpg" /> 
     </div> 
     <div> 
      <img src="Images/Tearing_Apart.jpg" /> 
     </div> 
     <div> 
      <img src="Images/Teaser.jpg" /> 
     </div> 
     <div> 
      <img src="Images/Terra_Nova.jpg" /> 
     </div> 
    </div> 
</div>

Toute aide serait grandement appréciée

Source

2011-02-09 Tuscan

Vous pouvez utiliser d'autres approche: laisser #imgReel fixe, et redimensionner les éléments:

Déplacement du imgReel au fond, fera que si vous faites un slideUp à l'élément en haut, annexant avant ce premier élément tout en bas (après le dernier élément), vous aurez l'effet que la bobine bouge, disparaissant d'abord en haut de l'image en cours.

Dans le code, en utilisant le plugin scrollTo:

var $reel = null; 
function init() { 
    $reel = $("#imgReel") 
    // Keep the first element as first shown, now that we're going to take the reel to the bottom 
    $reel.children("div:first").insertAfter($reel.children("div:last")) 
    // Move to the bottom using scrollTo or whatever you want: 
    $reel.scrollTo("max") 
} 

function next() { 
    // Clone the first element (not visible) at the end 
    var $topElement = $reel.children("div:first") 
    var $bottomElement = $topElement.clone().appendTo($reel) 

    // Hide the top element (cloned now at the bottom) and remove it when it's done 
    $topElement.slideUp(1000, function() { $(this).remove() }) 

    // Mark the next 'current' 
    $reel.children(".current").removeClass("current"); 
    $bottomElement.addClass("current"); 
}

D'autre part, si vous ne voulez pas faire une boucle infinie, et de garder votre approche, en utilisant scrollTo est aussi simple que cela:

funnction next() { 
    var $current = $reel.find("div.current").removeClass("current") 
    var $next = $current.next() 
    if(!$next.length) $next = $reel.children("div:first") 
    $reel.scrollTo($next.addClass("current"), 1000) 
} 

function prev() { 
    var $current = $reel.find("div.current").removeClass("current") 
    var $next = $current.prev() 
    if(!$next.length) $next = $reel.children("div:last") 
    $reel.scrollTo($next.addClass("current"), 1000) 
})

Espérons que cela aide :-)

Source

2011-02-09 13:49:52

Vous pouvez revenir en haut de la bobine, ou déplacer un div vu à la fin de la bobine.

Le retour au début, vous pouvez faire joli en passant la boîte à une couleur, déplacer au début (l'utilisateur ne voit pas cela se produire), et fondu de la couleur. De cette façon, l'utilisateur sait qu'il regarde à nouveau les mêmes images.

Source

2011-02-09 12:42:20 Gidon

Logique pour le diaporama JQuery

Répondre

Questions connexes