是否可以使用jQuery根据背景滑块图像名称更改字体颜色？
[英]Is it possible to change font color based on background slider image name using jQuery?
问题描述
I am trying to change the font color of the navigation based on the color of the background image which is an image slider. 
我试图根据作为图像滑块的背景图像的颜色更改导航的字体颜色。 I'm adding a class to the nav by looking at the end of the image name "dark.png" or "light.png" to change the font color but I don't know how to get it to change the font color every time the slider switches images. 我要通过在图像名称“ dark.png”或“ light.png”的末尾添加一个类来更改字体颜色，但我不知道如何使用它来更改字体颜色滑块切换图像的时间。
If there is a simpler/better solution already out there please let me know. 如果已有更简单/更好的解决方案，请告诉我。 Also I realize I'm mixing pure JavaScript and jQuery in my example so if anyone has a pure jQuery solution that would be awesome. 我也意识到我在示例中混用了纯JavaScript和jQuery，所以如果有人有一个很棒的纯jQuery解决方案。
Here is my code for a very simplified version for troubleshooting. 这是我的代码，用于故障排除的非常简化的版本。 I also did a jsfiddle example. 我也做了一个jsfiddle示例。
HTML: HTML：
<body>
<nav>
<ul>
<li>About</li>
</ul>
</nav>
</body>
CSS: CSS：
body {
background-repeat: no-repeat;
background-size:cover;
width:300px;
height:300px;
}
.dark {
color:#ffffff;
}
JavaScript: 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");
}
})();
5 个解决方案
解决方案1
1 已采纳 2015-07-02 06:31:44
there are many options and here is one of them. 有很多选择，这是其中之一。 Keep array of the classes with relative index of backgrounds. 保留具有相对背景索引的类的数组。 There is no need of extra color change function. 不需要额外的变色功能。
$(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]);
});
解决方案2
1 2015-07-02 06:41:18
Hello I have updates you jsfiddle here is working link https://jsfiddle.net/patelmit69/hjamrnu3/10/ 您好，我有jsfiddle更新给您，这里是工作链接https://jsfiddle.net/patelmit69/hjamrnu3/10/
Code 码
$(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]);
});
});
解决方案3
1 2015-07-02 06:41:23
Among other things, here are the list of changes: 除其他事项外，以下是更改列表：
- You can simply use setInterval instead of recursing setTimeout 您可以简单地使用setInterval而不是递归setTimeout
- 'nav' selector wont work for class='nav' 'nav'选择器不适用于class ='nav'
https://jsfiddle.net/arunzo/hjamrnu3/11/ 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);
});
解决方案4
0 2015-07-02 06:48:15
Try this above code 试试上面的代码
Js 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]);
});
});
解决方案5
0 2016-07-19 00:17:11
Here are 2 JS libraries that will help you do the trick: 这里有2个JS库可以帮助您完成这一任务：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.