Question

我正在创建一个具有两层的jQuery滑块：一张图片和每张幻灯片的一个段落。

HTML：

    <div class="scontainer">
        <div class="slides">
            <div class="slide">
                <img class="eapic" src="https://imgplaceholder.com/450x300/336699/ffffff/fa-arrow-right">
            </div>
            <div class="slide">
                <img src="https://imgplaceholder.com/450x300/336699/ffffff/fa-home">
            </div>
            <div class="slide">
                <img src="https://imgplaceholder.com/450x300/336699/ffffff/fa-envelope">
            </div>
        </div>
        <div class="texts">
            <div class="text">
                <p>this is first paragraph.</p>
            </div>
            <div class="text">
                <p>this is second paragraph.</p>
            </div>
            <div class="text">
                <p>this is third paragraph.</p>
            </div>
        </div>
    </div>
<button type="button" id="left">Left</button>
  <script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js'></script>

CSS：

    .scontainer {
    width: 450px;
    overflow: hidden;
    position: relative;
}
.slides {
    width: 3000px;
    height: 300px;
    position: relative;

}
.slide {
    width: 450px;
    height: 300px;
    float: left;
}

.texts{
    z-index: 1000;
    position: absolute;
    width: 3000px;
    height: 300px;
    top:0;
}
.text {
    width: 450px;
    height: 300px;
    float: left;
}

JS：

    $(document).ready(function() {

    var slideWidth = $('.slide').width();
    var slideHeight = $('.slide').height();
    $('.slides').css({ marginLeft: - slideWidth });
    $('.slide:last-child').prependTo('.slides');

    $('.texts').css({ marginLeft: - slideWidth });
    $('.text:last-child').prependTo('.texts');

function toTheLeft() {
        $('.slides').animate({left:-slideWidth}, {duration:200, complete: function() {
            $('.slide:first-child').appendTo('.slides'); 
            $('.slides').css({'left':''});
            $('.texts').animate({left:-slideWidth},{duration:200, complete: function() { $('.text:first-child').appendTo('.texts');$('.texts').css({'left':''});  }});
        }});
    }

    $('#left').on('click', function() {
        toTheLeft();
    });

});

我希望我的滑块显示图像，并在每个图像之后显示相关段落，但是如您在示例代码中所见，图像和段落一起显示，并且在滑动图像之后，段落也会滑动。但是我想要这样：在滑动图像之后，将段落淡入，然后使段落滑动。

有可能吗？ jQuery动画和完整方法无法获得理想的结果。

多层jQuery滑块

0 个答案: