Question

我正在尝试根据作为图像滑块的背景图像的颜色来更改导航的字体颜色。我通过查看图像名称“dark.png”或“light.png”的结尾来添加一个类来导航，以更改字体颜色，但我不知道如何让它更改每个字体的颜色滑块切换图像的时间。

如果有更简单/更好的解决方案，请告诉我。另外我意识到我在我的例子中混合了纯JavaScript和jQuery，所以如果有人有一个非常棒的纯jQuery解决方案。

这是我的代码，用于非常简化的故障排除版本。我也做了jsfiddle例子。

HTML：

<body>
    <nav>
        <ul>
            <li>About</li>
        </ul>
    </nav>
</body>

CSS：

body { 
    background-repeat: no-repeat;
    background-size:cover;
    width:300px;
    height:300px;
}

.dark {
    color:#ffffff;
}

JavaScript的：

$(document).ready(function(){    

            //slideshow:
            $(function () {
                var slideshow = $('body');
                var backgrounds = [
                    'url(http://markpfaff.com/bk1-dark.png)', 
                  'url(http://markpfaff.com/bk2-light.png)'];
                var current = 0;

                function nextBackground() {

                    slideshow.css(
                        'background-image',
                    backgrounds[current = ++current % backgrounds.length]);

                    setTimeout(nextBackground, 5000);
                }

                setTimeout(nextBackground, 5000);
                slideshow.css('background-image', backgrounds[0]);
            });

});

(function colorChange(){
    var b = $('body').css('background-image');
    if(b.match(/-dark.png\)$/)){
        $("nav").addClass("dark");
    }else if(b.match(/-light.png\)$/)){
        $("nav").removeClass("dark");
    }
})();

Answer 1

有很多选项，其中之一就是其中之一。使用相对背景索引保持类的数组。不需要额外的换色功能。

$(function () {
    var slideshow = $('.body');
    var backgrounds = [
        'url(http://markpfaff.com/bk1-dark.png)', 
        'url(http://markpfaff.com/bk2-light.png)'];
    var colorsClasses = ['dark','light'];
    var current = 0;

    function nextBackground() {
        slideshow.css(
            'background-image',
            backgrounds[current = ++current % backgrounds.length]
        );
        $("nav").attr("class",colorsClasses[current]);
        setTimeout(nextBackground, 5000);
    }

    setTimeout(nextBackground, 5000);
    slideshow.css('background-image', backgrounds[0]);
    slideshow.css("color",color[0]);
});

Answer 2

您好我有jsfiddle这里有更新工作链接https://jsfiddle.net/patelmit69/hjamrnu3/10/

代码的

$(document).ready(function () {

    //slideshow:
    $(function () {
        var slideshow = $('.cb-slideshow');
        var backgrounds = [
            'url(http://markpfaff.com/bk1-dark.png)',
            'url(http://markpfaff.com/bk2-light.png)'];
        var colors = ["#ffffff", "#FF0000"];
        var current = 0;

        function nextBackground() {

            slideshow.css(
                'background-image',
            backgrounds[current = ++current % backgrounds.length]);
            slideshow.css("color", colors[current]);

            setTimeout(nextBackground, 5000);
        }

        setTimeout(nextBackground, 5000);
        slideshow.css('background-image', backgrounds[0]);
    });

});

Answer 3

除此之外，还有以下变更清单：

您可以简单地使用setInterval而不是递归setTimeout
＆＃39; NAV＆＃39;选择器不适用于class =＆＃39; nav＆＃39;

https://jsfiddle.net/arunzo/hjamrnu3/11/

$(document).ready(function () {


        var slideshow = $('#cb-slideshow');
        var backgrounds = [
            'url(http://markpfaff.com/bk1-dark.png)',
            'url(http://markpfaff.com/bk2-light.png)'];
        var current = 0;

        function nextBackground() {
            var b = backgrounds[current = ++current % backgrounds.length];
            slideshow.css(
                'background-image', b);

            if (b.match(/-light.png\)$/)) {
                $(".nav").addClass("light");
            } else if (b.match(/-dark.png\)$/)) {
                $(".nav").removeClass("light");
            }


        }

        setInterval(nextBackground, 1000);



});

Answer 4

试试以上代码

的js

$(document).ready(function(){    

            //slideshow:
            $(function () {
                var slideshow = $('.cb-slideshow');
                var backgrounds = [
                    'url(http://markpfaff.com/bk1-dark.png)', 
                  'url(http://markpfaff.com/bk2-light.png)'];
                var current = 0;

                function colorcode(){
                 var a = $('.cb-slideshow').attr('bg-img');


if (a.indexOf('-dark.png') > -1) {
 $("nav").addClass("dark");
}else if (a.indexOf('-light.png') > -1) {
  $("nav").removeClass("dark");
}

                    console.log(a,"test",a.indexOf('-dark.png'));
                }

                function nextBackground() {
var element=backgrounds[current = ++current % backgrounds.length];
                    slideshow.css(
                        'background-image',element).attr("bg-img",element);
colorcode();
                    setTimeout(nextBackground, 5000);
                }

                setTimeout(nextBackground, 5000);
                slideshow.css('background-image', backgrounds[0]);
            });

});

js Fiddle demo

Answer 5

这里有2个JS库可以帮助你解决问题：

是否可以使用jQuery基于背景滑块图像名称更改字体颜色？

5 个答案: