Question

我有一个自动启动的Slider。我希望当某个图像出现时，.menu-li中的正确主题将变为font-weight：bold。如果我不够清楚，这里有一个很好的例子：http://bxslider.com/examples/auto-show-start-stop-controls - ＆gt;只有这里滑块不能自动使用setInterval。

    var autoSlider = "";
    var startRefresh = function() {
    if (autoSlider !== "") {
        return;
    }

    autoSlider = setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(300)
        .promise().done(function() {
            $('#slideshow > div:first').next()
            .fadeIn(300)
            .end()
            .appendTo('#slideshow');
        });

    },  5000);
};
startRefresh();

HTML：

            <ul class="menu-ul">
                <li class="menu-li a">travel</li>
                <li class="menu-li b">sport</li>
                <li class="menu-li c">real estate</li>
                <li class="menu-li d">hotels</li>
            </ul>

Answer 1

您可以使用jQuery＆＃39; .data('name')检索HTML元素中的任何变量数据。要使用HTML创建初始值，请使用data-whateveryouwant=""。然后，当您拥有两个元素时，可以检索该数据值并将当前链接设置为粗体。

具有data-属性的滑块HTML：

<div id="slideshow">
    <div data-menutarget=".menu-ul li.a"></div>
    <div data-menutarget=".menu-ul li.b"></div>
    <div data-menutarget=".menu-ul li.c"></div>
</div>

新setInterval功能

var first = $('#slideshow > div:first');
first.fadeOut(300)
.promise().done(function() {
    var second = first.next();
    second.fadeIn(300);
    first.appendTo('#slideshow');
    $(second.data('menutarget')).css('font-weight','bold');
    $(first.data('menutarget')).css('font-weight','normal');
});

自动更改<li> css </li>

1 个答案: