與jQuery同時更改圖像和文本CSS屬性

Question

我有一些圖像和相應的圖像名稱。我想在某個時間間隔內同時更改圖像和相應的圖像名稱（CSS屬性）（圖像的淡入/淡出）。 我的html代碼：

<div id="s_links"> 
<ul class="s_list"> 
    <li class="home_p"><a class="lists1">img1 name</a></li> 
    <li class="home_p"><a class="lists2">img2 name</a></li> 
    <li class="home_p"><a class="lists3">img3 name</a></li> 
    <li class="home_p"><a class="lists4">img4 name</a></li> 
    <li class="home_p"><a class="lists5">img5 name!</a></li> 
</ul> 
</div> 

<div id="slideshow"> 
    <img class="one" src="img1"> 
    <img class="two" src="img2"> 
    <img class="three" src="img3"> 
    <img class="four" src="img4"> 
    <img class="five" src="img5"> 
</div> 

例如，如果當前圖像是 'IMG3'，那麼CSS應該是： -

jQuery(".lists3").css({ 
    "background-color": "#677FC6", 
    "border": "1px solid #677FC6", 
    "border-radius": "6px" 
}); 
jQuery(".lists1,.lists2, .lists4,.lists5").css({ 
    "background": "none", 
    "border": "none", 
    "color": "#000" 
}); 

請幫我... Thankz

我試圖與這代碼，圖像工作完美，但css不能改變

$(function() { 
    var current = 0; 
$imgs = jQuery('#header .abc71'); 
    imgAmount = $imgs.length; 
    $($imgs.css('position', 'absolute').hide().get(0)).show(); 
    window.setInterval(swapImages, 4000); 

    function swapImages() { 
     var $currentImg = $($imgs[current]); 
     if(current == imgAmount-1) current = -1; 
     var $nextImg = $($imgs[++current]), 
      speed = 1500; 
     // animation speed should be the same for both images so we have a smooth change 
     $currentImg.fadeOut(speed); 
     $nextImg.fadeIn(speed); 
    } 
}); 

Answer 1

看到這個：Sample

function swapImages() { 
    var $currentImg = $($imgs[current]); 
    if(current == imgAmount-1) current = -1; 
    var $nextImg = $($imgs[++current]), 
    speed = 1500; 
    // animation speed should be the same for both images so we have a smooth change 
    $currentImg.fadeOut(speed); 
    $nextImg.fadeIn(speed); 
    $("[class^=lists]").css({"background":"none","border":"none","color":"#000"}); 
    $(".lists" + ($nextImg.index()+1)).css({"background-color":"#677FC6","border":"1px solid #677FC6","border-radius":"6px"}); 
} 

Answer 2

爲什麼不試試以下：

• 創建，你將觸發這個功能使用的setTimeout
• 定期的功能，你將有一個整型變量，你將代表當前圖像的索引
• 的功能將淡出當前圖像並更新其名稱的CSS屬性（您當前的代碼未顯示）
• 此變量在每次調用函數時都會遞增（如果太高，則設置爲零）
• 您的函數將會淡入新的當前圖像並更新其名稱的CSS屬性（即您當前的代碼並不表明無論是）你的函數
• 結束