Question

我已经addClass和removeClass制作了幻灯片，但滑块没有效果。所以我想在方法addClass和removeClass上添加一些效果。

$('#button-next').on('click', function () {
    $('#big img').css({
        'display': 'none'
    });

    var currentActiveImage = $('.image-shown');
    var nextActiveImage = currentActiveImage.next();

    if (nextActiveImage.length == 0) {
        nextActiveImage = $('.carousel-inner img').first();
    }

    currentActiveImage.removeClass('image-shown').addClass('image-hidden').css({
        'z-index': '-10'
    });
    nextActiveImage.addClass('image-shown').removeClass('image-hidden').css({
        'z-index': '2000'
    });
    $('.carousel-inner img').not([currentActiveImage, nextActiveImage]).css('z-index', 1);
    e.preventDefault()
});

$('#button-prev').on('click', function () {
    var currentActiveImage = $('.image-shown');
    var nextActiveImage = currentActiveImage.prev();
    if (nextActiveImage.length == 0) {
        nextActiveImage = $('.carousel-inner img').last();
    }
    currentActiveImage.removeClass('image-shown').addClass('image-hidden').css({
        'z-index': '-10'
    });
    nextActiveImage.addClass('image-shown').removeClass('image-hidden').css({
        'z-index': '2000'
    });
    $('.carousel-inner img').not([currentActiveImage, nextActiveImage]).css('z-index', 1);
    e.preventDefault()
});

Answer 1

您可以使用CSS3动画功能。

CSS3 animations

Answer 2

我建议你使用CSS过渡。

将opacity: 0; CSS属性添加到.image-hidden课程，并确保.image-hidden 没有 display: none;。

与.image-shown类似。

然后将转场添加到.image-shown和.image-hidden

.image-shown { 
    /* ... */
    opacity: 1;
}

.image-hidden {
    /* ... */
    opacity: 0;
}

.image-shown, .image-hidden {
    -webkit-transition: opacity .5s linear 0s; /* For Safari 3.1 to 6.0 */
    transition: opacity .5s linear 0s;
}

JSfiddle

Answer 3

也许您正在寻找CSS动画功能。例如，将您的css添加/更改为：

.carousel-inner {
    /* We keep it position relative */
    position: relative;
    /* Change or remove these if you want */
    height: 30px;
    padding: 20px;
    width: 100px;
    border: 1px dashed;
}
.carousel-inner img {
    /* So that they go on top of each other */
    position: absolute;
    /* Transitions; we animate the opacity, but you can animate whatever you want */
    -webkit-transition: opacity 5s ease; /* 5 seconds */
    -moz-transition: opacity 5s ease;
    -ms-transition: opacity 5s ease;
    -o-transition: opacity 5s ease;
    transition: opacity 5s ease;
}
/* This is just for you, to tell the difference between the images (not necessary) */
img:nth-child(1) {
    background-color: white;
}
img:nth-child(3) {
    background-color: green;
}
.image-shown {
    /* Change this from
    display: block;
    to: */
    opacity: 1;
}
.image-hidden {
    /* Change this from
    display: none;
    to: */
    opacity: 0;
}

http://jsfiddle.net/mb9b6/

注意图像如何淡入下一个图像。不需要对脚本进行任何更改，但如果您为position: relative和carousel-inner设置了position: absolute图片，那么您可以使用z-index删除内容，因为它不会更长的必要。无论如何，一次只能显示一个图像。

请注意，这仅适用于现代浏览器。如果您需要支持旧浏览器，请使用jQuery的fade方法，如下所示：

$('#button-next').on('click', function(){
  $('#big').css({'display':'none'});

  var currentActiveImage = $('.image-shown');
  var nextActiveImage = currentActiveImage.next();

  if (nextActiveImage.length == 0) {
    nextActiveImage = $('.carousel-inner img').first();
  }

  currentActiveImage.removeClass('image-shown').addClass('image-hidden').fadeOut();
  nextActiveImage.addClass('image-shown').removeClass('image-hidden').fadeIn();
  e.preventDefault()    
});

如果您这样做，请删除image-shown和image-hidden的所有CSS;它们变成了简单的标记类。对prev按钮执行类似操作。

如何在jQuery方法“addClass”上添加效果？

3 个答案: