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

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

＆＃13;

position:absolute;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

jQuery：从右到左滑动内容？

1 个答案: