Question

我正在创建一个jquery轮播。此功能将图像滑动到左侧，并根据它们移动到的位置更改其类别。（点击一个名为“增加”的按钮后）。它第一次正常工作，删除左图像，将中间类改为左边，右边改为中间，同时在右边添加一个新图像并给它正确的位置类。如果你想看到它的实际效果，那么这就是小提琴：http://jsfiddle.net/6fwbS/25/

第二次调用函数时，一切都搞砸了。附加一个新图像，但它具有0不透明度，类是.right_slot。知道我在这里做错了吗？提前谢谢。

function slide_img_left() {

        var imgs = imgArr.length;
        a++;
        if (a >= imgs) {
            a = 0;
        }

        b = a - 1;
        c = a + 1;

        if (b < 0) {
            b = imgs - 1;
        }
        if (c >= imgs) {
            c = 0;
        }

        var left = $('.left_slot'); var middle = $('.middle_slot'); var right = $('.right_slot');
        var newImg = imgArr[c][0];
        left.animate({
            opacity: 0,
            left: '-=50px'
        }, 300, function() {
            left.remove();
        });


        middle.animate({
            left: '-=50px'
        }, 300, function() {
            middle.attr('class', 'left_slot');
            right.attr('class', 'middle_slot');
        });

        right.animate({
            left: '-=50px'
        }, 300, function(){
            $("#basic_div").append(newImg);
            newImg.attr('class', 'right_slot'); 
        });

        $("#varsDiv").html(" var b = " + b + " var a = " + a + " var c = " + c);

    }

Answer 1

您应该.clone()您的图片或还原您对其样式所做的更改。

$("#basic_div").append(imgArr[b].clone());
$("#basic_div").append(imgArr[a].clone());
$("#basic_div").append(imgArr[c].clone());
...
function slide_img_left() {
  ...
  var newImg = imgArr[c].clone();
  ...
}

向左移动left_slot并隐藏它只是拧紧你的布局。 middle_slot不见了。

对于增加功能，这是a working example，淡出效果略有不同。

Jquery类更改停止在第二个函数调用上工作

1 个答案: