Question

我有一些图像和相应的图像名称。我想在某个时间间隔内同时更改图像和相应的图像名称（css属性）（图像的fadeIn / fadeOut）。我的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"});
}

Answer 2

为什么不尝试以下方法：

使用setTimeout
在此函数中，您将拥有一个整数变量，表示当前图像的索引
你的函数将淡出当前图像并更新其名称的CSS属性（你当前的代码没有显示）
此变量将在每次调用函数时递增（或者如果太高则设置为零）
然后你的函数将淡入新的当前图像并更新其名称的CSS属性（你当前的代码也没有显示）
您的功能结束

使用jQuery同时更改图像和文本css属性

2 个答案: