Question

我正在使用slidejs在我的网站上创建幻灯片，这工作正常，但我想在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类。

非常感谢任何帮助

Answer 1

只需将初始类直接添加到body（<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);
        }
    });
});

Answer 2

好的设法让这个工作得到了解，感谢Marcus的帮助，我只是调整了你的代码来获取当前类应用的正确列表'pagination';

$(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，因为我没有使用其中一种

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

在幻灯片更改时添加当前幻灯片正文类

2 个答案: