基于jquery的HTML内容幻灯片放映/转换

为什么要使用插件?使用这一行(为了可读性,我把它分为3行)

看见 demo

你的HTML应该是这样的

HTML

<div class="yourContainer">
 <div>some html</div>
 <div>other html</div>
</div>

JS/JQuery

$(function(){
    $('.yourContainer div:gt(0)').hide();
    setInterval(function(){$('.yourContainer :first-child').fadeOut().next().fadeIn().end().appendTo('.yourContainer');}, 3000);
});

css(可选=使转换更平滑)

.yourContainer{ position:relative;}
.yourContainer div{ position:absolute; hight:300px; width:300px; background:red; }

怎么样:

• jQuery Cycle Plugin
• jQuery Flip Plugin

你甚至可以修改/定制这些插件来创建你想要的效果。

link text 很酷。它们显示了一个来自 payroll company 在没有javascript的情况下,他们的演示甚至可以很好地降级。

我创建了一个名为 Basic jQuery Slider . 它既简单又干净,只做它应该做的。如果你决定用它,有任何问题,只要问,我会帮你解决。

我最终使用了 SlidesJS . This one 祖布也很伟大。