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

Is it possible to change font color based on background slider image name using jQuery?

本文关键字：图像颜色字体可以使 jQuery 背景是否更新时间：2023-09-26

我正试图根据作为图像滑块的背景图像的颜色来更改导航的字体颜色。我在导航中添加了一个类，通过查看图像名称"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");
    }
})();

有很多选项，这里是其中之一。保留具有相对背景索引的类数组。不需要额外的变色功能。

$(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]);
});

你好，我有更新，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]);
    });
});

除其他外，以下是更改列表：

您可以简单地使用setInterval而不是递归setTimeout
'nav'选择器不适用于class='nav'

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);

});

试试上面的代码

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演示

这里有两个JS库可以帮助您完成这项任务：

背景调查
颜色亮度