jQuery 轮播 [英] jQuery carousel

查看:27
本文介绍了jQuery 轮播的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

与许多其他人一样,我正在为我的主页寻找轮播.我已经看过市场了.

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).

所以,有要求

  • 带有叠加层的大图(信息 + 链接)
  • 带滚动的水平滑块控件
  • 如果可能的话,jQuery

你会把我送到哪里?我错过了一些很酷的组件/库?

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

推荐答案

如果你喜欢这个页面的轮播:

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆