0

我正在创建一个 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);

    }
4

1 回答 1

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看不见了。

这是一个具有略微不同淡出效果的增加功能的工作示例。

于 2012-04-21T22:48:34.547 回答