更改不同传送带上的导航栏字体颜色

我在这个项目中有一个完整的页面滑块（在主页上）。在滑块内部，我有5个项目具有不同的图片。

我想更改第一张幻灯片/旋转木马项目上导航栏文本的颜色，其余部分可能看起来相同。首先应该是灰色的，在最后4张幻灯片上，导航栏的文本应该是白色的。

我也想改变标志的导航栏内（在第一张幻灯片应该是灰色的，并在最后4个滑动它应该是白色也。我有2个PNG图片做这项工作。）

这里有两张照片来证明我想做些什么： slider1 slider2 (rest of sliders)

HTML：

<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top"> 
    <div class="navbarmargin container-fluid"> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span><img src="muszerfal_elements/img/menu2.png" style="max-width: 38px; padding-right: 4px; margin-top: 6px;"/> 
      </button> 
      <a class="navbar-brand page-scroll" href="index.html"> 
       <img class="logo" src="img/final_2.png"> 
      </a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" > 
      <ul class="navbartext nav navbar-nav navbar-right"> 
       <li> 
        <a href="works.html">Works</a> 
       </li> 
       <li> 
        <a href="personal.html">Personal</a> 
       </li> 
       <li> 
        <a href="about.html">About</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

<!-- Full Page Image Background Carousel Header --> 
<header id="carousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel" data-slide-to="1"></li> 
     <li data-target="#carousel" data-slide-to="2"></li> 
     <li data-target="#carousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for Slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <!-- Set the first background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('img/slider_1.jpg');" alt="Slide 1"></div> 
      <div class="carousel-caption caption1"> 
       <h2>Fashion</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the second background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('img/slider_3.jpg');" alt="Slide 2"></div> 
      <div class="carousel-caption caption2"> 
       <h2>Fashion</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('img/slider_4.jpg');" alt="Slide 3"></div> 
      <div class="carousel-caption caption3"> 
       <h2>Beauty</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('img/slider_5.jpg');" alt="Slide 3"></div> 
      <div class="carousel-caption caption4"> 
       <h2>Fine Art</h2> 
      </div> 
     </div> 
    </div> 

</header>

你能帮助我如何下手呢？

预先感谢您！

来源

2017-02-19 F..

我认为你所要做的与fullPage.js类似，它允许一个完整的页面滑动条，我相信使用一些基本的CSS你可以实现所需的变化的颜色特征。 http://alvarotrigo.com/fullPage/#firstPage

来源

2017-02-19 13:03:24

没错。通过使用[回调]（https://github.com/alvarotrigo/fullPage.js#callbacks）或[fullPage.js状态类]（https://github.com/alvarotrigo/fullPage.js#state-classes-加入逐fullpagejs）。查看一个回调演示[here]（http://codepen.io/alvarotrigo/pen/XbPNQv）和关于州级课程的视频教程[here]（https://www.youtube.com/watch?v= qiCVPpI9l3M）。 – Alvaro

.carousel-内> .item：第一胎H2 {颜色：黑色;}

来源

2017-02-19 13:04:17 vgoreiko

我假设这是你使用滑块：https://github.com/BlackrockDigital/startbootstrap-full-slider

更改的颜色第一张幻灯片上的文字不是问题（请参阅下面的示例）。但是，我不认为这个滑块有一个回调函数，它返回它所在的幻灯片。这将需要根据您所在的幻灯片更改导航栏的字体颜色。所以我认为你将不得不寻找另一个完整页面的滑块，它可以让你做到这一点。

/* 
 
* Start Bootstrap - Full Slider (http://startbootstrap.com/) 
 
* Copyright 2013-2016 Start Bootstrap 
 
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) 
 
*/ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.carousel, 
 
.item, 
 
.active { 
 
    height: 100%; 
 
} 
 

 
.carousel-inner { 
 
    height: 100%; 
 
} 
 

 

 
/* Background images are set within the HTML using inline CSS, not here */ 
 

 
.fill { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
    -o-background-size: cover; 
 
} 
 

 
footer { 
 
    margin: 50px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <title>Full Slider - Start Bootstrap Template</title> 
 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 

 
</head> 
 

 
<body> 
 

 
    <!-- Navigation --> 
 
    <nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top"> 
 
    <div class="navbarmargin container-fluid"> 
 
     <div class="navbar-header page-scroll"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
       <span class="sr-only">Toggle navigation</span><img src="http://placehold.it/25x25" style="max-width: 38px; padding-right: 4px; margin-top: 6px;"/> 
 
      </button> 
 
     <a class="navbar-brand page-scroll" href="index.html"> 
 
      <img class="logo" src="http://placehold.it/25x25"> 
 
     </a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="navbartext nav navbar-nav navbar-right"> 
 
      <li> 
 
      <a href="works.html">Works</a> 
 
      </li> 
 
      <li> 
 
      <a href="personal.html">Personal</a> 
 
      </li> 
 
      <li> 
 
      <a href="about.html">About</a> 
 
      </li> 
 
      <li> 
 
      <a href="contact.html">Contact</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 

 
    <!-- Full Page Image Background Carousel Header --> 
 
    <header id="carousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel" data-slide-to="1"></li> 
 
     <li data-target="#carousel" data-slide-to="2"></li> 
 
     <li data-target="#carousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for Slides --> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
     <!-- Set the first background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('http://placehold.it/1900x1080/ffffff');" alt="Slide 1"></div> 
 
     <div class="carousel-caption caption1" style="color: grey;"> 
 
      <h2>Fashion (this text is grey)</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <!-- Set the second background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('http://placehold.it/1900x1080');" alt="Slide 2"></div> 
 
     <div class="carousel-caption caption2"> 
 
      <h2>Fashion (this text is white)</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <!-- Set the third background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('http://placehold.it/1900x1080');" alt="Slide 3"></div> 
 
     <div class="carousel-caption caption3"> 
 
      <h2>Beauty</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <!-- Set the third background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('http://placehold.it/1900x1080');" alt="Slide 3"></div> 
 
     <div class="carousel-caption caption4"> 
 
      <h2>Fine Art</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </header> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <!-- Script to Activate the Carousel --> 
 
    <script> 
 
    $('.carousel').carousel({ 
 
     interval: 5000 //changes the speed 
 
    }) 
 
    </script> 
 

 
</body> 
 

 
</html>

来源

2017-02-19 13:17:16

更改不同传送带上的导航栏字体颜色

回答

相关问题