0

这是我在把它扔进厕所之前修复这个项目的最后一次尝试。所以基本上它是一个滑块，可以从幻灯片数据容器中的图像中提取数据。将其应用于 div 时，它会使用 css 类对其进行样式设置。我的问题是为什么我在运行它时会得到“超出最大调用堆栈大小”？我正在使用动画回调，所以真的应该没有问题。无论哪种方式，我都将退出该函数并返回。我不确定发生了什么事。

请忽略全局变量和评论部分，因为我一直在尝试解决这个问题的许多方法。

为关心的人完成了滑块脚本。

JS（需要 jQuery 和 jQuery UI 效果）：

var dt=5000; //set this to determine slide delay time

function transitionSlides(){c++;if(c<=i){$(".slide-holder").toggle("slide",{direction:"right"},"fast");return changeBackground()}else{c=0;return transitionSlides()}}function changeBackground(){var e=c.toString();var t=$("#slide"+e).attr("title");var n=$("#slide"+e).attr("src");$(".slide-holder").css("background","url("+n+") no-repeat").html(t).delay(dt).toggle("slide",{direction:"left"},"fast",transitionSlides)}var c=0;var i=new Number;$(document).ready(function(e){i=$(".slide-data").children("img").length;transitionSlides()})

CSS：

.slide-holder {
    font-family: /* slide font */
        font-size:40px;
    text-align:center;
    color:#FFF;
    text-shadow:2px 2px 3px #000;
}
.slide-data, .slides {
    display:none;
}
.slide-frame, .slide-holder { /* slide-frame keeps page from jarring up and down when slide-holder exits */
    height:325px;
    width:800px;
}

HTML 标记示例：

<div class="slide-frame">
<div class="slide-holder"></div>
<div class="slide-data">
<img src="images/slides/slide1.png" class="slides" id="slide1" width="800" height="325" alt="empowering startups" title="slide text one" />
<img src="images/slides/slide2.png" class="slides" id="slide2" width="800" height="325" title="This is a test" />
<img src="images/slides/slide3.png" class="slides" id="slide3" width="800" height="325" title="This is also a test" />
<img src="images/slides/slide4.png" class="slides" id="slide4" width="800" height="325" title="Testing the last one too." />
</div>
</div>
4

1 回答 1

1

您正在调用transitionSlides而不是将其作为回调传递。删除().

$(".slide-holder").delay(4000).toggle("slide", { direction: "left"}, "fast", transitionSlides)
于 2013-09-04T14:09:50.457 回答