基於幻燈片切換Logo圖片

Question

使用Bootstrap。我想根據幻燈片更改導航欄中的徽標顏色或圖像。我想我可以指定哪個幻燈片顯示黑色標誌，哪個幻燈片顯示白色標誌。有沒有辦法通過CSS調整基於幻燈片的導航欄，或者我需要JavaScript嗎？

非常感謝。

Answer 1

你是如何實施你的幻燈片？您需要提供代碼才能正確回答。

但是，您可以在幻燈片cha動時更改img元素的src屬性。

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

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

 
#logo { 
 
    width:50px; 
 
}

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