Faire pivoter les images, si dernière image puis masquer

J'ai 3 images que je veux faire pivoter quand on clique sur un bouton.Faire pivoter les images, si dernière image puis masquer

image1, image2, image3. Si l'image est à l'image 1, elle doit afficher image2 (et ainsi de suite, dans l'ordre de image1, .., image3). Lorsque je suis à l'image3, il doit alors masquer l'image, c'est-à-dire ne pas l'afficher.

J'ai besoin d'aide avec la fonction javascript pour cela, j'ai déjà le code pour l'événement click button.

Je passe la fonction toggle() l'objet jquery $('myImageID');

$(document).ready(
    function() 
    { 

     $('#button1').click(function() { toggleSector($('#sector1')) } ;    

    } 
); 

function toggleSector(o) 
    {  
     // help! 
    } 

<div id="sector1"></div> 
<input type="button" id="button1" value="Sector 1" />

Mise à jour

Je dois trouver en quelque sorte le nom de l'image d'arrière-plan en cours mis à la <div> où mon image est.

Y a-t-il une propriété d'arrière-plan pour obtenir le nom de l'image en cours d'affichage?

Source

2009-02-04 Blankman

Vous pouvez obtenir un background-image en y accédant à partir du .css(name) method:

$("#sector1").css("background-image");

Sans gérer votre liste d'images dans un tableau ou d'une autre façon, vous allez devoir vérifier chaque Background- image pour savoir quand il est temps de cacher votre élément. Ce n'est pas une bonne façon de travailler, car cela ne vous permet pas d'ajouter facilement une nouvelle image dans le futur si vous le souhaitez.

Peut-être quelque chose comme ce qui suit:

function toggle(el) { 
    var whenToHide = "background3.jpg"; 
    var currBackground = $(el).css("background-image"); 
    /* ...code... */ 
    if (currBackground == whenToHide) { 
    $(el).remove(); 
    } 
}

Source

2009-02-04 15:04:12 Sampson

Avez-vous d'utiliser l'image d'arrière-plan?
Sinon, voici un petit échantillon de code pour ce que je ferais.

<html> 
<head> 
<style type="text/css"> 
    #imageRotater { list-style-type:none; } 
    #imageRotater, .imageRotater li { margin:0px auto; padding: 0px; } 
    #imageRotater img { display:none; } 
</style> 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> 
<script type="text/javascript"> 
(function($) { 
    $.fn.rotate = function() { 
     return this.each(function() { 
      var list = $(this).is('ul') ? $(this) : $('ul', this); 
      list.find('img:eq(0)').show(); 

      $('img', list).click(function() { 
       $(this).hide().closest('li').next().find('img').show(); 
      }); 
     }); 
    }; 
})(jQuery); 


$(document).ready(function() { 
    $("#imageRotater").rotate(); 
}); 

</script> 

</head> 
<body> 
    <div id="sector1"> 
     <ul id="imageRotater"> 
      <li><img src="image1.png" alt="" /></li> 
      <li><img src="image2.png" alt="" /></li> 
      <li><img src="image3.png" alt="" /></li> 
     </ul> 
    </div> 
</body> 
</html>

Source

2009-02-04 15:20:56 bendewey

Voici quelque chose qui fonctionne.
Chaque superposition est initialement masquée avec CSS. Chaque fois que vous cliquez sur le bouton, toutes les superpositions sont masquées, puis l'une est révélée en fonction de certaines données stockées sur le bouton. Si les données atteignent le nombre maximal de superpositions + 1, aucune n'est affichée et les données sont réinitialisées à 0.

Markup

<div id="container" style="background: yellow"> 
    <div class="overlay" style="background: red"></div> 
    <div class="overlay" style="background: green"></div> 
    <div class="overlay" style="background: blue"></div> 
</div>

style

div{ 
    width: 100px; 
    height: 100px; 

} 
.overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
} 
#container{ 
    position: relative; 
}

Script

$(function() { 
    var b = $('#button1'); 
    b.data('next', 0); 
    b.data('max', $('.overlay').size()+1); 
    b.click(function(e) { 
     var next = $(this).data('next'); 
     var o = $('.overlay'); 
     o.hide(); 
     o.eq(next).show(); 
     next = (next+1) % $(this).data('max'); 
     $(this).data('next', next); 
    }); 
});

Source

2009-02-04 16:13:12 meouw

En réponse à la réponse de Bendeway ci-dessus, vous devrez insérer avant

list.find('img:eq(0)').show();

la ligne suivante:

list.find('img').hide();

Cela permet de masquer toutes les images avant qu'elle ne commence à tourner à travers eux.

Source

2009-11-24 20:05:33 KyokoHunter

Faire pivoter les images, si dernière image puis masquer

Répondre

Questions connexes