循环列表 | CSS-Tricks

此代码将循环遍历 ID 为“cyclelist”的无序列表。可用于任何带有子元素的元素。将“ul#cyclelist li”替换为您要循环遍历的元素。

$(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}

Dan Taylor

# 2010 年 2 月 2 日

是否可以将列表项设为活动链接？就像现在，当你将它们设为链接时，什么也不会发生，为什么呢？

Ant

# 2010 年 5 月 16 日

请注意，最好使用 $(“ul#cyclelist > li”) 选择器，因为可能存在嵌套列表。

@Dan Taylor. 当然，为什么不呢？使用 <li><a href=”#.”>链接</a></li>

toplu email

# 2010 年 6 月 25 日

你能上传演示吗？
谢谢

Guilllo

# 2010 年 12 月 16 日

它在 IE 上不起作用

Gordy

# 2011 年 3 月 29 日

是的，它在 IE 中的行为不正常，不幸的是..

kia

# 2011 年 11 月 29 日

当另一个事件发生时，是否可以暂停操作。
例如，在鼠标悬停时暂停
谢谢

Noah

# 2014 年 11 月 24 日

我相信你在发布这篇文章后的几年里已经解决了你的问题，但我认为其他人会欣赏一个好的、可靠的答案。只需知道，为了使用间隔，这与上面的代码非常不同。

$(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

# 2012 年 1 月 18 日

.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();
});

David Elam

# 2012 年 1 月 18 日

抱歉重复发布……为了修复 IE，请更改

.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();
});

supra

评论永久链接# 2012 年 3 月 5 日

IE 修复似乎不起作用

这是我尝试的方法

(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

# 2012 年 3 月 27 日

在 IE 中似乎不起作用。通过跳过它并使用 Cycle 插件来节省几个小时。

Aaryadev

# 2012 年 5 月 14 日

这太棒了
它也在 IE 中运行

非常感谢

swift

# 2012 年 10 月 12 日

不要通过从 1 到 1 动画不透明度来延迟，而是使用 .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();
 });

Corey Ellis

# 2013 年 4 月 1 日

有人对如何随机化这个有什么建议吗？ (jQuery 新手)

Adam Mirkovich

评论永久链接# 2013 年 10 月 13 日
Corey，

我还没有尝试过，我相信这里有人可以详细说明。
cycleThru 将是一个不同的函数
在你的列表中，你可以给每个 ‘li> 元素一个顺序号。在函数开始时，将一个变量设置为列表范围内的一个随机数。然后在已经概述的 jQuery 部分中使用此变量。它看起来像这样
```
$(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

# 2013 年 4 月 6 日

嗨。我需要这个循环在遍历完所有元素后停止，然后显示一个类似“开始”或其他消息的消息。？有人吗？

Thomas Lowe

# 2013 年 11 月 19 日

这段代码对我来说运行完美，除了我需要一个更改。我希望列表垂直居中。像这样

    text

文本文本
文本文本文本

我可以删除“position: absolute;”来实现这一点，但这样每行后续文本在淡入时都会向下移动一行。

有人知道怎么做吗？谢谢。

Thomas Lowe

评论永久链接# 2013 年 11 月 19 日

哎呀，那没有正确显示。我希望文本右对齐居中。

Alex Howes

# 2014 年 2 月 12 日

发现使用 FadeIn 和 FadeOut 比使用不透明度要容易得多。

我只是不喜欢在列表项上设置静态高度。因此，与其将列表项设置为绝对，不如将其设置为显示隐藏，FadeIn 和 FadeOut 只会切换显示元素并使其淡入淡出。

    $(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();

});

David

# 2014 年 8 月 14 日

如何才能使它重复；在完成一次迭代后从列表开头重新开始？

Virendra

# 2014 年 11 月 20 日

是否可以根据文本长度动态调整旋转时间？
如果文本长度较短，则时间较短，如果文本长度较长，则时间较长。

www.adaotokiralama.com

# 2016 年 1 月 2 日

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

adaotokiralama.com

# 2016 年 1 月 2 日

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

“`

评论

发表评论 取消回复

发表评论取消回复