Question

我正在尝试制作自定义内容滑块。几乎就在那里，但在滚动时出现背景白色问题。

每个滑块之间都会产生间隙或空格。

我创建了一个小提琴，以便您可以查看滑块。

<ul id="slider">
    <li class="case_study" id="case_study1">Div Slide 1 <div class="right"></div></li>
    <li class="case_study" id="case_study2">Div Slide 2 <div class="right"></div></li>
    <li class="case_study" id="case_study3">Div Slide 3 <div class="right"></div></li>
</ul>

演示：http://jsfiddle.net/squidraj/6S6KT/2/

全屏：http://jsfiddle.net/squidraj/6S6KT/2/embedded/result/

请建议。

Answer 1

$('#slider li.case_study:first-child').animate({
    left: '-100%'
}, 300, function () { // The command function is a **CALLBACK**
    $('#slider li.case_study:first-child').css('left', '100%');

上面的代码完成了它的目的 - 我在你使用回调的地方添加了一条评论。

当第一个项目结束时，回调会触发 - 所以当你的脚本将第一个div向左移动100％时，它会将第二个div添加到屏幕并将其动画到左侧。

您希望在.animate({},300)子句中发生所有事情 - 如下所示：

将第二个div添加到第一个div的右侧 - 然后同时将两个div移动到左侧。

快走了 - 如果你遇到困难然后发布你的新代码 - 但看看你是否可以自己解决它 - 它会帮助你更快地学习！

在自定义内容滑块中滑动时出现空白/间隙问题

1 个答案: