javascript - 将 parent 与绝对子女配对？ (响应式轮播)

解决了，见底！

我正在尝试响应式轮播（流体）。我将元素堆叠在一起，以便宽度可以是可变的，具体取决于父对象的宽度。问题是我需要父母隐藏溢出，这对于绝对定位的孩子是不可能的。

清理JS的技巧也非常感谢！

有没有人有任何想法如何改善这一点或替代方案？这是小提琴：http://jsfiddle.net/j35fy/5/

.carousel-wrap {
    position: relative;
}

.carousel-item {
    position: absolute;
    top: 0;
}

$.fn.mwCarousel = function(options) {
    //Default settings.
    var settings = $.extend({
        changeWait: 3000,
        changeSpeed: 800,
        reveal: false,
        slide: true,
        autoRotate: true
    }, options );

    var CHANGE_WAIT = settings.changeWait;
    var CHANGE_SPEED = settings.changeSpeed;
    var REVEAL = settings.reveal;
    var SLIDE = settings.slide;
    var AUTO_ROTATE = settings.autoRotate;
    var $carouselWrap = $(this);
    var SLIDE_COUNT = $carouselWrap.find('.carousel-item').length;
    var rotateTimeout;

    if (AUTO_ROTATE) {
        rotateTimeout = setTimeout(function(){
            rotateCarousel(SLIDE_COUNT-1);
        }, CHANGE_WAIT);
    }

    function rotateCarousel(slide) {
        if (slide === 0) {
            slide = SLIDE_COUNT-1;
            rotateTimeout = setTimeout(function(){
                $('.carousel-item').css('margin', 0);
                $('.carousel-item').show();
            }, CHANGE_WAIT);
            if (REVEAL) {
                $($carouselWrap.find('.carousel-item')[slide]).slideToggle(CHANGE_SPEED);
            } else if (SLIDE) {
                var carouselItem = $($carouselWrap.find('.carousel-item')[slide]);
                carouselItem.show();
                var itemWidth = carouselItem.width();
                carouselItem.animate({margin: 0}, CHANGE_SPEED);
            } else {
                $($carouselWrap.find('.carousel-item')[slide]).fadeIn(CHANGE_SPEED);
            }

            slide = slide+1;
        } else {
            if (REVEAL) {
                $($carouselWrap.find('.carousel-item')[slide]).slideToggle(CHANGE_SPEED);
            } else if (SLIDE) {
                var carouselItem = $($carouselWrap.find('.carousel-item')[slide]);
                var itemWidth = carouselItem.width();
                carouselItem.animate({marginLeft: -itemWidth, marginRight: itemWidth}, CHANGE_SPEED);
            } else {
                $($carouselWrap.find('.carousel-item')[slide]).fadeOut(CHANGE_SPEED);
            }
        }

        rotateTimeout = setTimeout(function(){
            rotateCarousel(slide-1);
        }, CHANGE_WAIT);
    }
}

$('.carousel-wrap').mwCarousel();

解
实际上，第一张幻灯片永远不会动（最后一张幻灯片可见），因此将其设置为固定位置：静态，所有效果都很好。

最佳答案

我认为只要更改CSS，您实际上就在那里：

.carousel-wrap {
    position: relative;
    overflow:hidden;
    height:80%;
    width:90%;
}

演示：http://jsfiddle.net/robschmuecker/j35fy/2/

关于javascript - 将 parent 与绝对子女配对？ (响应式轮播)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25031851/