基于幻灯片切换徽标图像

Question

使用Bootstrap。我想根据幻灯片更改导航栏中的徽标颜色或图像。我以为我可以指定哪个幻灯片显示黑色徽标，哪个幻灯片显示白色徽标。有没有办法根据CSS滑动调整导航栏，还是我需要JavaScript？

非常感谢你。

Answer 1

您是如何实施幻灯片的？您需要提供正确回答的代码。

但是，当幻灯片被调整时，您可以更改src元素的img属性。

＆＃13;

＆＃13;

var start = function() {
  var toarray = function(e){return [].slice.call(e)}
  var logo = document.querySelector("#logo");
  var slides = toarray(document.querySelectorAll(".slide"));
  var buttons = toarray(document.querySelectorAll("button"));
  var current = 0;
  var imgs = [
    "http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png",
    "https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png",
    "http://demandware.edgesuite.net/aahb_prd/on/demandware.static/-/Sites/default/dw86f363db/Motorola_US/moto-logo-200px.png"
  ];
  
  var changeLogo = function() {
    logo.src = imgs[current];
  };
  
  buttons.forEach(function(e,i) {
    e.addEventListener("click", function() {
      current += (i == 0 ? -1 : 1);
      current = current >= slides.length ? slides.length - 1 : current;
      current = current < 0 ? 0 : current;
      var active = document.querySelector(".visible");
      var next = slides[current];
      active.classList.remove("visible");
      next.classList.add("visible");
      
      changeLogo();
    });
  });
};
document.addEventListener("DOMContentLoaded", start);

＆＃13;

.slide {
  display:none;
}
.slide.visible {
  display:block;
}

#logo {
  width:50px;
}

＆＃13;

<img id="logo" src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" />
<div>
  <div class="slide visible">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<button>&lt;</button>
<button>&gt;</button>

＆＃13;

＆＃13;

＆＃13;