jQuery轮播 [英] jQuery carousel

问题描述

和其他很多人一样，我正在为我的主页寻找旋转木马。
我已经看过市场了。

as so many other people I am looking for a carousel for my homepage. I already had a look at the market.

我最喜欢的是几个存在的混合物。并且，如果可能的话，它应该基于jQuery，因为我已经使用它了。不过，一些好的旋转木马都是基于mootools。

My favorite would be a mix of several existings ones. And, if possible, it should be based on jQuery, since I am using that already. Some good carousels are based on mootools, though.

那么，我喜欢什么？
noobSlide 很不错。完美的是6和7的混合：6具有更大的画面，有一些叠加和链接。图7中的图像具有平行定位。问题：我有> 50不是8，所以我需要某种滑块。
SmoothGallery 有一个漂亮的滑块（点击图片后）。

So, what do I like? noobSlide is nice. Perfect would be the a mix from 6 and 7: 6 has the larger picture with some overlay and link. 7 has the parallel positioning of the images. Problem: I have >50 not 8, so I would need some kind of slider. SmoothGallery has a nice slider (after clicking on pictures).

所以，有了要求

• 带覆盖图的大图片（信息+链接） （s））


• 滚动的水平滑块控件


• 如果可能，jQuery

你会把我寄给你？我错过了一些很酷的组件/库？

Where would you send me? Some cool component/library I missed?

推荐答案

如果你喜欢这个页面上的carousel：

If you like carousel on this page:

http://www.adventure-service.com/

我正在使用这个插件：

http://thomlx.free.fr/jquery/jquery_carousel.htm

只需包含该javascript文件，把html如下：

Just include that javascript file, put html as follows:

                    <div id='banner_container'>
                        <ul>
                            <li><img src='' alt='' /></li>
                            <li><img src='' alt='' /></li>
                            <li><img src='' alt='' /></li>
                            <li><img src='' alt='' /></li>
                            <li><img src='' alt='' /></li>
                        </ul>
                    </div>

拨打此功能：

        $('#banner_container').carousel();

就是这样。如果你想要例如自动滑动和按钮，那么你可以点击每个按钮和相应的图像来显示：

And that's it. If you want for example auto slide and buttons so you can click on each button and coresponding image to show up:

        $('#banner_container').carousel({
            autoSlide: true, 
            autoSlideInterval: 4000,
            pagination: true
        });

这篇关于jQuery轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！