Question

我有一个简单的轮播实现，我正在尝试调整一些以满足一些非常具体的要求。

有一个绝对定位的叠加层，可在页面首次加载时突出显示轮播的第一个缩略图。

当鼠标移动到轮播中的另一个可见缩略图时，我需要将幻灯片移动到该缩略图，并将叠加内的文本更新为新的图像编号（x中）图像数量。）

现在，我花了将近一整天的时间试图让动画很好地发生。我尝试过多种方法，但我感到非常沮丧。这可能是由于我缺乏CSS3忍者。

Here is a fiddle for the relavant HTML, CSS and jQuery carousel implementation which needs a working version of the slidy-boxy thing described above.

Answer 1

这是小提琴的updated version。 <img>鼠标悬停事件的代码如下：

// References to commonly used elements
var $ul = $(".carousel ul");
var $overlayImageCounter = $('.overlayImageCounter');

// Original offset of the overlay.  Use it to correct the position we'll be
// moving it to over each image.
var offset = $overlayImageCounter.position().left;

// Mouseover binding go now!
$(".carousel img.galleryThumb").mouseover(function() {

    // The image that triggered our mouseover
    $img = $(this);

    // Animate the overlay to the image's left position.
    // Correct for carousel's current left margin and overlay's original offset
    $overlayImageCounter.stop().animate({
        left: $img.position().left + parseInt($ul.css('marginLeft'), 10) + offset
    });

    // Update the text of the overlay
    $imageCounter.text($ul.find('img').index($img) + 1 + "/" + nThumbs);

});

需要调整的代码的最后一位是重置旋转木马的上一个/下一个操作的叠加层左侧位置。我没有添加这一点，但这只是将left属性设置为原始偏移量的问题。

鼠标悬停在旋转木马顶部动画绝对定位的div

1 个答案: