0

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

2 回答 2

1

看到这个：样本

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"});
}
于 2013-03-19T11:42:17.087 回答
0

为什么不尝试以下方法：

  • 创建一个您将使用 setTimeout 定期触发的函数
  • 在这个函数中，你将有一个整数变量，你将代表当前图像的索引
  • 您的函数将淡出当前图像并更新其名称的 CSS 属性（您当前的代码没有显示）
  • 这个变量将在每次调用函数时递增（如果太高则设置为零）
  • 然后，您的函数将淡入新的当前图像并更新其名称的 CSS 属性（您当前的代码也没有显示）
  • 你的功能结束
于 2013-03-19T11:35:21.573 回答