javascript - 试图获取动态幻灯片文本。容器上没有固定高度。见 fiddle

Question

我正在尝试将文本“WE CREATE DANCE”“WE HAVE FUN”“WE LOOK GOOD”放置在一个容器内，该容器将根据文本的大小和文本的行数进行调整。容器的大小是未知的，因为它是动态的。我无法向此容器添加高度 .slide。我希望容器根据文本大小进行调整。如果我从子元素中取出 position: absolute ，文本就是我想要的……但是，这样做会破坏幻灯片。所以那是行不通的。我选择了这个幻灯片代码，因为它非常小。所以我想保持它的小，只添加一些代码行。我不想添加整个框架。我正在使用 jquery 并希望保留它。

现在您将看到幻灯片文本与其下方的文本重叠。我试图将底部的文字向下推。

http://jsfiddle.net/9xn19111/16/

在此先感谢您的帮助。我希望我最终可以让这个工作:)

<div class="slider">
<div class="slider-item intro secondary">WE CREATE DANCE</div>
<div class="slider-item intro secondary">WE HAVE FUN</div>
<div>

--

var InfiniteRotator = {
init: function() {
    //initial fade-in time (in milliseconds)
    var initialFadeIn = 1000;

    //interval between items (in milliseconds)
    var itemInterval = 5000;

    //cross-fade time (in milliseconds)
    var fadeTime = 500;

    //count number of items
    var numberOfItems = $('.slider-item').length;

    //set current item
    var currentItem = 0;

    //show first item
    $('.slider-item').eq(currentItem).fadeIn(initialFadeIn);

    //loop through the items        
    var infiniteLoop = setInterval(function() {
        $('.slider-item').eq(currentItem).fadeOut(fadeTime);

        if (currentItem == numberOfItems - 1) {
            currentItem = 0;
        } else {
            currentItem++;
        }
        $('.slider-item').eq(currentItem).fadeIn(fadeTime);

    }, itemInterval);
}
}

$(document).ready(function() { //start after HTML, images have loaded

// check if there is one image or more
if($('.slider > div').length > 1){
    // run slider
    InfiniteRotator.init();

}else{
    // just one image don't slide
    alert('just one image');
    $('.slider-item').eq(0).fadeIn();
}

});

Answer 1

在我看来，使用 CSS 是一种更简洁的方式:

var InfiniteRotator = {
    init: function() {

        //interval between items (in milliseconds)
        var itemInterval = 5000;
      
        //loop through the items        
        var infiniteLoop = setInterval(function() {
            var current = $(".slider-item.visible").removeClass('visible');

            var next = current.next();
            next = next.length ? next : current.siblings().first();
            next.addClass('visible');
          
        }, itemInterval);
    }
}

$(document).ready(function() { //start after HTML, images have loaded
  
    // check if there is one image or more
    if($('.slider > div').length > 1){
        // run slider
        InfiniteRotator.init();
    }
});

.slidermwtext {
    margin-top: 50px;
}

.slider-item {
    position: absolute;
    top: 8px;
    left: 0;
    text-align: center;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.slider-item.visible {
    position: static;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
    <div class="slider-item intro secondary visible">WE CREATE DANCE</div>
    <div class="slider-item intro secondary">WE HAVE<br> FUN</div>
    <div class="slider-item intro secondary">WE LOOK GOOD</div>
</div>

 <p class="slidermwtext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p>