Question

我也需要在css中更改图像，当单击按钮时它与幻灯片图像匹配。

使用列表填充幻灯片图像，基本上您点击列表并显示相关图像。

这是这些图像的css

.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');
}

这是我到目前为止的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/

如果我忘记了某些内容而你需要更多信息，请告诉我。

Answer 1

您的选择器错误 - 图片已应用于span，但您的jQuery代码正在更改background-image的{{1}}。

从#hero-container（你的css的最后一行）取出图像，你会发现容器正在其下方发生变化。

Answer 2

使用

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

使用jquery动态更改css图像

2 个答案: