javascript - jQuery:从右向左滑动内容？

Question

我正在尝试使用 jquery 创建一个简单的内容幻灯片。

当我运行我的代码时，我根本没有滑动，但同时我没有收到任何错误来表明为什么我的代码不起作用!

这是一个工作FIDDLE

这是我的代码:

$(window).load (function() {
    var theImage = $('.some');
    var theWidth = theImage.width()
    //wrap into mother div
    $('#feedTxt').wrap('<div id="mother" />');
    //assign height width and overflow hidden to mother
    $('#mother').css({
        width: function() {
        return theWidth;
      },
        height: function() {
        return theImage.height();
      },
        position: 'relative',
        overflow: 'hidden'
    });
        //get total of image sizes and set as width for ul
    var totalWidth = theImage.length * theWidth;
    $('#feedTxt').css({
        width: function(){
        return totalWidth;
    }
    });
});//doc ready

有人可以就这个问题提出建议吗？

提前致谢

编辑

我现在可以浏览这些元素，但它们并没有真正滑动!!

这是另一个工作 FIDDLE

Answer 1

尝试这样的事情。这里的关键是将 position:relative 添加到父 div 并使幻灯片 position:absolute;。

$("#feedTxt > div:gt(0)").hide();

setInterval(function() { 
  $('#feedTxt > div:first')
    .animate({width:'toggle'},350)
    .hide()
    .next()
    .animate({width:'toggle'},350)
    .end()
    .appendTo('#feedTxt');
},  3000);

#feedTxt {
    display: flex;
    overflow-x: scroll;
    height:450px;
    width:100%;
    position:relative;
}

.some {
    flex: 0 0 100%;
    height: 450px;
    position: absolute; 
    right: 0;
    top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" id="feedTxt">

    <div class="some">
        <h1>title 1</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>



    <div class="some">
        <h1>title 2</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>


    <div class="some">
        <h1>title 3</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>


    <div class="some">
        <h1>title 4</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>


</div>