jquery - 使用 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"
});

请帮助我...谢谢

我试过这个代码，图像工作完美，但 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"});
}