Liste durchlaufen | CSS-Tricks

Dieser Code durchläuft eine unsortierte Liste mit der ID 'cyclelist'. Kann für jedes Element mit Kindern verwendet werden. Ersetzen Sie "ul#cyclelist li" durch die Elemente, die Sie durchlaufen möchten.

$(document).ready(function() {

	 var j = 0;
	 var delay = 2000; //millisecond delay between cycles
	 function cycleThru(){
	         var jmax = $("ul#cyclelist li").length -1;
	         $("ul#cyclelist li:eq(" + j + ")")
	                 .animate({"opacity" : "1"} ,400)
	                 .animate({"opacity" : "1"}, delay)
	                 .animate({"opacity" : "0"}, 400, function(){
	                         (j == jmax) ? j=0 : j++;
	                         cycleThru();
	                 });
	         };

	 cycleThru();

 });

ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}

Kommentare

Dan Taylor

# 2. Februar 2010

Ist es möglich, die Listenelemente zu aktiven Links zu machen? Wenn man sie zu Links macht, passiert nichts, warum?

Antworten

Ant

# 16. Mai 2010

Beachten Sie, dass es besser ist, den Selektor $(“ul#cyclelist > li”) zu verwenden, da es verschachtelte Listen geben kann.

@Dan Taylor. Sicher, warum nicht? Verwenden Sie <li><a href=”#.”>Link</a></li>

Antworten

toplu email

# 25. Juni 2010

Kannst du eine Demo hochladen?
danke

Antworten

Guilllo

# 16. Dezember 2010

Es funktioniert nicht in IE

Antworten

Gordy

# 29. März 2011

Ja, es verhält sich leider nicht korrekt in IE..

Antworten

kia

# 29. November 2011

Ist es möglich, die Aktion zu pausieren, wenn ein anderes Ereignis eintritt?
zum Beispiel Pause beim Überfahren mit der Maus
danke

Antworten

Noah

# 24. November 2014

Ich bin sicher, dass Sie Ihr Problem in den Jahren seit dieser Veröffentlichung gelöst haben, aber ich dachte, andere würden eine gute, solide Antwort zu schätzen wissen. Wisse einfach, dass dies sehr anders ist als der obige Code, um Intervalle zu verwenden.

$(document).ready(function() {

$("#cyclelist li:first-child").addClass("first active"); // Give classes first and active to the first li
$("#cyclelist li:last-child").addClass("last"); // Give class last to the last li
$("#cyclelist .active").fadeIn(400);

var timeSet = 3; //Second delay between cycles
var timeDelay = timeSet * 1000; 

var cycleThru = function (){
    if($(".last").is(":visible")){
        $("#cyclelist .active").removeClass("active");
        $("#cyclelist .first").addClass("active");
        $("#cyclelist li:visible").fadeOut(400, function(){
            $(".active").fadeIn(400);
            });
}else{
    if($("#cyclelist .active").is(":visible")){
        $("#cyclelist .active").removeClass("active");
        $("#cyclelist li:visible").next("li").addClass("active");
        $(".active").prev("li").fadeOut(400, function(){
            $(".active").fadeIn(400);
            });
    }
}
};

var cycleInterval = setInterval(function () {
    cycleThru();
}, timeDelay);

cycleInterval;


// This will stop the cycling when the mouse enters cyclelist

$("#cyclelist").mouseenter(function(){
    clearInterval(cycleInterval); 
 });

//This will start the cycling when the mouse leaves cyclelist

$("#cyclelist").mouseleave(function(){
        cycleInterval = setInterval(function () {
        cycleThru();
    }, timeDelay);
 });

});

David Elam

# 18. Januar 2012

.animate({“opacity” : “0”}, 400, function(){
(j == jmax) ? j=0 : j++;
cycleThru();
});
zu

.animate({“opacity” : “0”}, 400, function(){
$(“ul#cyclelist li”).hide();
(j == jmax) ? j=0 : j++;
cycleThru();
});

Antworten

David Elam

# 18. Januar 2012

Entschuldigen Sie den doppelten Beitrag… um IE zu beheben, ändern Sie

.animate({“opacity” : “0″}, 400, function(){
(j == jmax) ? j=0 : j++;
cycleThru();
});

.animate({“opacity” : “0″}, 400, function(){
$(“ul#cyclelist li”).hide();
(j == jmax) ? j=0 : j++;
cycleThru();
});

Antworten

supra

Permalink zum Kommentar# 5. März 2012

Der IE-Fix scheint nicht zu funktionieren

Hier ist, was ich versucht habe

(function($) {

$.cycleThru = {
defaults: {
delay: 1,

}
}
$.fn.extend({
cycleThru:function(config) {
var config = $.extend({}, $.cycleThru.defaults, config);
return this.each(function() {
var delay = config.delay;
var ulid = $(this).attr(“id”);
var j = 0;
var jmax = $(this).children(“li”).length -1;

function cyclee(){
$(“ul#” + ulid + ” li:eq(” + j + “)”)
.animate({“opacity” : “1”} ,200)
.animate({“opacity” : “1”}, delay)

.animate({“opacity” : “0”}, 400, function(){
$(“ul#cycleThru_qoutes li”).hide();
(j == jmax) ? j=0 : j++;
cycleThru();

});
};
cyclee();
})
}
})
})(jQuery);

JCook

# 27. März 2012

Scheint in IE nicht zu funktionieren. Sparen Sie Stunden, indem Sie dies überspringen und stattdessen das Cycle Plugin verwenden.

Antworten

Aaryadev

# 14. Mai 2012

Das ist großartig
Es funktioniert auch in IE

Vielen Dank

Antworten

swift

# 12. Oktober 2012

Anstatt durch Animation der Opazität von 1 auf 1 zu verzögern, um korrekt zu arbeiten, verwenden Sie die Methode .delay( 2000 ).

$(document).ready(function() {
    var j = 0;  
    var inbetween = 2000;  //milliseconds   
    function cycleThru(){
        var jmax = $("ul#cyclelist li").length -1;
        $("ul#cyclelist li:eq(" + j + ")")
            .animate({"opacity" : "1"} ,400)
            .delay( inbetween )
            .animate({"opacity" : "0"}, 400, function(){
                (j == jmax) ? j=0 : j++;
                cycleThru();
            });
        };
    cycleThru();
 });

Antworten

Corey Ellis

# 1. April 2013

Hat jemand Vorschläge, wie man das randomisiert? (jQuery-Neuling)

Antworten

Adam Mirkovich

Permalink zum Kommentar# 13. Oktober 2013
Corey,

Ich habe das nicht ausprobiert und bin sicher, dass jemand hier mehr dazu sagen könnte.
cycleThru wäre eine andere Funktion
In Ihrer Liste könnten Sie jedem 'li'-Element eine fortlaufende Nummer geben. Am Anfang der Funktion setzen Sie eine Variable auf eine zufällige Zahl innerhalb des Bereichs Ihrer Liste. Dann verwenden Sie diese Variable im bereits skizzierten jQuery-Teil. Es würde ungefähr so aussehen.
```
$(document).ready(function() {
var j = 0;  
var inbetween = 2000;  //milliseconds   
function cycleThru(){
    $("#"+j)
        .animate({"opacity" : "1"} ,400)
        .delay( inbetween )
        .animate({"opacity" : "0"}, 400, function(){
            j = ; //<--randomizing the variable goes here*/
            cycleThru();
        });
    };
cycleThru();
```
});

Dan

# 6. April 2013

Hallo. Ich brauche diesen Zyklus, um nach dem Durchlaufen aller Elemente zu stoppen und dann eine Nachricht wie "gestartet" oder was auch immer die Nachricht anzuzeigen. ?Jemand ?

Antworten

Thomas Lowe

# 19. November 2013

Dieser Code funktioniert perfekt für mich, außer dass ich eine Änderung brauche. Ich möchte, dass die Liste vertikal zentriert ist. So wie diese

    text

texttext
texttexttext

Ich kann "position: absolute;" entfernen, um das zu erreichen, aber dann rückt jede nachfolgende Textzeile eine Zeile nach unten, wenn sie eingeblendet wird.

Weiß jemand, wie das geht? Danke.

Antworten

Thomas Lowe

Permalink zum Kommentar# 19. November 2013

Ups, das wurde nicht richtig angezeigt. Ich möchte den Text zentriert ausrichten.

Alex Howes

# 12. Februar 2014

Habe festgestellt, dass die Verwendung von FadeIn und FadeOut einfacher ist als die Verwendung von Opazität.

Ich konnte es einfach nicht ertragen, der Listenposition eine feste Höhe zu geben. Anstatt das Listenelement als absolut zu setzen, setzen Sie einfach "display: none;" darauf und FadeIn und FadeOut wechseln einfach das Display-Element und blenden es aus.

    $(document).ready(function() {

    var j = 0;
    var delay = 2000; //millisecond delay between cycles
    function cycleThru(){
         var jmax = $("#footer .clients-list li").length -1;
         $("#footer .clients-list li:eq(" + j + ")")
                 .fadeIn(400)
                 .delay(delay)
                 .fadeOut(400, function(){
                         (j == jmax) ? j=0 : j++;
                         cycleThru();
                 });
         };

    cycleThru();

});

Antworten

David

# 14. August 2014

Was ist der beste Weg, um dies zu wiederholen; wieder am Anfang der Liste zu iterieren, sobald es abgeschlossen ist?

Antworten

Virendra

# 20. November 2014

Ist es möglich, die Rotationszeit dynamisch abhängig von der Textlänge zu gestalten?
Wenn die Textlänge klein ist, ist die Zeit kurz und wenn sie lang ist, ist die Zeit länger.

Antworten

www.adaotokiralama.com

# 2. Januar 2016

<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>

Antworten

adaotokiralama.com

# 2. Januar 2016

function example() {
element.innerHTML = "code";
}

“`

Antworten

Kommentare

Antwort hinterlassen Antwort abbrechen