動態改變CSS圖像與jQuery

我需要在CSS太多改變一個形象，一個按鈕被點擊時，幻燈片圖像相匹配。動態改變CSS圖像與jQuery

的幻燈片圖像使用的是列表，基本上你通過點擊列表和相關的圖像上來填充。

下面是這些圖像

.hero li:nth-child(1) span { 
    background-image: url('http://image1.jpg'); 
} 
.hero li:nth-child(2) span { 
    background-image: url('http://image2.jpg'); 
} 
.hero li:nth-child(3) span { 
    background-image: url('http://image3.jpg'); 
}

這裏的CSS年代jQuery的我已經走到這一步，

jQuery(document).ready(function($) { 
    $(".trigger-wrapper").click(function() { 
    $("#menu-wrapper-left").stop().animate({width: 'toggle'}); 
    $('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)'); 
    return false; 
    }); 
});

但是這是一個靜態圖像，並僅選擇第一形象，我需要運行一邊滑動，任何想法？

這裏有一個小提琴，滑塊不會對小提琴的時刻工作，但你可以看到我的修整來實現。 http://jsfiddle.net/H863X/4/

如果我忘了的東西，你需要一些更多的信息，讓我知道。

來源

2014-03-06 Dan

是什麼寬度''toggle''嗎？你確定會工作嗎？我從來沒有見過像這樣使用過。 – Joeytje50

有語法錯誤！ $（ '＃英雄容器'）的CSS（ 'image1.jpg）'）。但在你的小提琴中是正確的。請妥善檢查。 –

謝謝，我編輯它使其更具可讀性，現在我已經糾正它。 – Dan

您的選擇是錯誤的 - 圖像被應用於span，但您的jQuery代碼正在更改#hero-container的background-image。

採取像關閉span（你的CSS的最後一行），你應該看到容器改變它的下方。

來源

2014-03-06 09:34:04 DoubleA

改變span使用'$（'。hero span'）'而不是 – DoubleA

使用

$('#hero-container').addClass("yourClass");

來源

2014-03-06 09:42:46

動態改變CSS圖像與jQuery

回答

相關問題