Question

所以我用左右导航箭头构建了这个小滑块，我在尝试将类添加到ul中的列表项时遇到了麻烦。

基本上我想在列表中的下一个项目中添加一个类，同时从上一个项目中删除该类。

现在问题是，我已经完美地工作了，但只是朝着正确的方向发展，而不是离开。

请注意，列表项会在两个方向上正确排序，它只是将类添加到左侧而不是：

$('.home_slider > li:first').addClass('active-slide');

$('#slider_arrow_right').click(function(){
  $('.active-slide').next().addClass('active-slide').prev().removeClass('active-slide');
  $('.home_slider > li:last').after($('.home_slider > li:first'));
});

$('#slider_arrow_left').click(function(){
  $('.home_slider > li:first').before($('.home_slider > li:last'));
  $('.active-slide').next().addClass('active-slide').prev().removeClass('active-slide');      
});

我尝试以几种不同的方式更改#slider_arrow_left点击功能，但它仍然在与右箭头相同的列表方向上添加类，或者根本不起作用。非常感谢任何帮助！

更新：

这是一个显示问题的JSFiddle：Fiddle

Answer 1

使用css子选择器。它将使您的生活更轻松，并减少您的代码。

<强>的JavaScript

$('#right').click(function(){
  $('.home_slider > li:last').after($('.home_slider > li:first'));
});

$('#left').click(function(){
  $('.home_slider > li:first').before($('.home_slider > li:last')); 
});

<强> CSS

.nav_buttons{
  display:inline-flex;
  color:#fff;
  padding:16px;
}
#left{
  width:40px;
  height:40px;
  margin-right:8px;
  background:grey;
  padding:4px;
}
#right{
  width:40px;
  height:40px;
  background:grey;
  padding:4px;
}
.home_slider{
  display:inline-flex;
  list-style-type:none;
}
.home_slider li{
  width:80px;
  height:80px;
}
#one{
  background:blue;
}
#two{
  background:red;
}
#three{
  background:yellow;
}
#four{
  background:green;
}
.home_slider>li:first-child{
   border:8px solid black;
}

此外，如果您需要获得第一个孩子，如果它具有以后在代码中使用的任何意义。

var firstChild = $('.home_slider li:first-child');

要做动画，只需更改css。

将此添加到css

@keyframes FadeIn { 
  from { opacity: 0; }
  to   { opacity: 1; }
}

并将其添加到已存在的子选择器中。

animation: FadeIn 1s linear;

添加/删除列表项列表

1 个答案: