在幻灯片更改时添加当前幻灯片主体类答案

【问题标题】：Add current slide body class on slide change在幻灯片更改时添加当前幻灯片主体类
【发布时间】：2011-09-27 04:46:31
【问题描述】：

我正在使用 slidesjs 在我的网站上创建幻灯片，这工作正常，但我想在 body 标签中添加一个递增的类，例如加载幻灯片 1，然后当幻灯片更改幻灯片 2 等时，直到幻灯片完全旋转并返回到幻灯片 1

我当前的代码是；

<script>
$(function(){
    $('#feature-slideshow').slides({
        preload: true,
        preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
        generateNextPrev: false,
        effect: 'fade',
        play: 5000,
        hoverPause: true,
        animationStart: function() {
            $("body").addClass("slide");
    }
    });
});
</script>

我有两个问题；

1) 我希望在加载幻灯片之前设置初始类，以便在加载页面而不是幻灯片时应用作为背景的样式

2) 如何在幻灯片切换/更改时增加 slide-x 类。

任何帮助将不胜感激

【问题讨论】：

标签： javascript jquery

【解决方案1】：

只需将初始类直接添加到正文（<body class="slide-1">）。无需让 JavaScript 执行此操作，因为它总是从幻灯片 1 开始。

要增加该数字，您可以设置currentClass 选项，以便我们可以使用.index() 获取当前幻灯片的索引。

$(function(){
    var slideshow = $("#feature-slideshow");
    slideshow.slides({
        preload: true,
        preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
        generateNextPrev: false,
        effect: 'fade',
        play: 5000,
        hoverPause: true,
        currentClass: "current"
        animationStart: function() {
            var idx = slideshow.children(".current").index();
            document.body.className = "slide-"+(idx+1);
        }
    });
});

【讨论】：

【解决方案2】：

好的，感谢 Marcus 的帮助，我刚刚调整了您的代码以获取应用了当前类的正确列表“分页”；

$(function(){
var slideshow = $("#feature-slideshow");
    slideshow.slides({
        preload: true,
        preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
        generateNextPrev: false,
        effect: 'fade',
        play: 5000,
        hoverPause: false,
        currentClass: "current",
        animationStart: function() {
            var idx = $('ul.pagination').children(".current").index();
            document.body.className = "slidebg-"+(idx+1);
        }
    });
});

由于某种原因，当幻灯片循环包含第一个列表时，我不得不将 slidebg-3 应用于正文标签

效果很好，但除了删除所有其他 body 类之外，我想我可以将它添加为 ID，因为我没有使用其中之一

无论如何希望这对其他人有帮助！

【讨论】：