我正在构建一个视差网站，我希望我的父导航及其子项能够在特定幻灯片上更改颜色以便可见。我应该在jQuery中使用什么代码来实现这一目标？
这是我的CSS，标记和代码：
.navigation{
font-family:thin lines and curves;
position:fixed;
text-align:center;
letter-spacing:1px;
z-index:51;
top:50%;
left:6%;
}
.navigation li{
font-family:thin lines and curves;
color:#fff;
display:block;
letter-spacing:2px;
padding:0 10px;
line-height:30px;
margin-bottom:2px;
margin-left:auto;
margin-right:auto;
-webkit-transition: all .2s ease-in-out;
}
.navigation li:hover,
.active{
font-family:thin lines and curves;
cursor:pointer;
text-decoration:underline;
}
.navigation2{
font-family:thin lines and curves; /*EC2127 - red color tone of logo*/
position:fixed;
text-align:right;
letter-spacing:1px;
top:50%;
left:88%;
z-index:51;
}
.navigation2 li{
font-family:thin lines and curves;
color:#fff;
display:block;
letter-spacing:2px;
padding:0 10px;
line-height:30px;
margin-bottom:2px;
margin-left:auto;
margin-right:auto;
-webkit-transition: all .2s ease-in-out;
}
.navigation2 li:hover,.active{
font-family:thin lines and curves;
cursor:pointer;
text-decoration:underline;
<ul class="navigation">
<li data-slide="1"><img class="geshalogo" src="images/geshalogo.png"></li>
<li data-slide="2">estate
<ul class="navigation2">
<li data-slide="2">land</li>
<li data-slide="3">varietal</li>
<li data-slide="4">people</li>
<li data-slide="6">practices</li>
<li data-slide="9">future offerings</li>
</ul>
</li>
<li data-slide="10">about</li>
<li data-slide="13">location</li>
<li data-slide="14">contact</li>
</ul>
jQuery(document).ready(function ($) {
//initialise Stellar.js
$(window).stellar();
//Cache some variables
var links = $('.navigation').find('li');
var link = $('.navigation2').find('li'); // informs to cache a second set of navigation and sets it to play
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
//Setup waypoints plugin
slide.waypoint(function (event, direction) {
//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');
//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
// same as the aboove for the second set of navigations
if (direction === 'down') {
$('.navigation2 li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
else {
$('.navigation2 li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation2 li[data-slide="1"]').addClass('active');
$('.navigation2 li[data-slide="2"]').removeClass('active');
}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
$('.navigation2').hide(); //Hide children by default
$('.navigation').children().click(function(){
$(this).siblings().children('.navigation2').hide();
$(this).children('.navigation2').slideToggle(2000, 'easeInOutQuint');
}).children('.navigation2').click(function (event) {
event.stopPropagation();
});
});
答案 0 :(得分：0)
关于编写代码的方式，根据当前活动幻灯片应用不同的颜色只需要做一件事。
首先声明一个对象数组，代表您需要的每张幻灯片的视觉设置：
var slideSettings = [
{ 'links': '#AAA', 'background': '#FFF', 'image': 'http://url-to-an-image1.png' },
{ 'links': '#BBB', 'background': '#FFF', 'image': 'http://url-to-an-image2.png' }
// add more colors here ...
];
之后，只要用户更改当前幻灯片（向上或向下滚动），您就会将当前幻灯片设置应用于需要更改的导航元素。
// ... whenever the user changes the current slide
$('.navigation li').css('color', slideSettings[dataslide].links);
$('.navigation li').css('background-color', slideSettings[dataslide].background);
$('.navigation li img').attr('src', slideSettings[dataslide].image);
// ... continue with the rest ...