使用 jquery 和 javascript 水平滑动 div

Question

我正在尝试在我的关于我们页面中显示我的推荐。在那里，我使用 3 divs 和水平样式来一次显示 3 个推荐。

我想要做的是我想添加一些滑动效果与查询消失 1st 3 divs 然后需要加载 2nd 3 divs 不同的推荐。等等..我做了HTML和CSS..但不知道如何用查询来做......任何人都可以帮助我做到这一点..???

<div class="testimonials">
    <div class="cols">
        contents...1st time                    
    </div>
    <div class="cols">
        contents...1st time       
    </div>
    <div class="cols">
        contents...1st time       
    </div>

    <div class="cols">
        contents...2st time                    
    </div>
    <div class="cols">
        contents...2st time       
    </div>
    <div class="cols">
        contents...2st time       
    </div>

</div>


.testimonials {
    width: 640px; 
    height: 300px;
    //background: red; 
}

.cols {
    width: 150px;
    height: 200px;
    margin: 0 20px 0 0;
    background: gray;
    float: left;
}

任何cmets，任何想法都非常感谢......

谢谢你..

Answer 1

这是一个很棒的 jQuery carousel 插件

http://sorgalla.com/projects/jcarousel/

Github： https://github.com/jsor/jcarousel

或

Github： https://github.com/SSilence/simple.carousel

在此处查看 jsFiddle 演示：http://jsfiddle.net/enve/GWhaz/

前三个 <li> 最先显示，其他三个在 2000 秒后显示。

Answer 2

试试这个轻量级的 javascript jQuery 库： http://baijs.nl/tinycarousel/

Answer 3

如果您确实想使用 jquery，请使用已经在社区中构建并存在的东西。这将比您从头开始创建的任何东西更加安全和灵活。使用类似的东西 coin slider 或 jquery cycle plugin。他们有一些关于你应用插件的 html 标记的细节。跟着它，你就完成了。

Answer 4

这样的？ http://jsfiddle.net/gZkUV/1/

$('#id').show('slide', {direction: 'right'}, 1000);