jQuery：从右向左滑动内容？

我想用jquery创建一个简单的内容幻灯片。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

来源

2016-07-21 Jackson

注意：您可以通过点击下面的JavaScript部分顶部右上角的框中添加了jQuery代码。也不要使用加载事件，代码已经在加载时运行。 –

你确定你的代码正在运行吗？虽然看着你的代码，我想知道你在这个代码方法背后创建幻灯片的原因吗？ – tnschmidt

@tnschmidt，我相信它的运行。它在jsfiddle上！是的，我试图创建一个幻灯片。 – Jackson

尝试这样的事情。此处的关键是将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>

来源

2016-07-21 20:44:41 tnschmidt

钉它交配。非常感谢你。 – Jackson

jQuery：从右向左滑动内容？

回答

相关问题