Question

我想在http://www.mtv.com/上创建一个具有滑动效果的旋转木马，如果用户点击幻灯片，则会从右侧显示一个新幻灯片并向左移动。我怎么能这样做？

Answer 1

就个人而言，我是用CSS做的。

<div class="slider">
   <div>Content area 1</div>
   <div>Content area 2</div>
   <div>Content area 3</div>
</div>

CSS：

.slider {
    white-space: nowrap;
    oveflow:hidden;
}
.slider>div {
    white-space: normal; /* reset "nowrap" above */
    display: inline-block;
    width: 100%;
    transition: margin-left 0.8s cubic-bezier(0.5, 0.1, 0.5, 1.25);
    /* the above transition gives a neat little "bounce-back" effect */
}

然后我的JavaScript就可以了：

theSlider.children[0].style.marginLeft = (-100*pageID)+"%";
// so 0% to view the first panel, 100% for the second, etc.

旁注：元素之间的空格会弄乱对齐。将所有<div>内容面板放在一行（或者更具体地说，确保在没有空格的面板之间执行</div><div>），或使用JS去除元素之间的空格。

使用javascript的轮播滑动效果

1 个答案: