jquery无限循环内容滑块插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

jquery.contentcarousel是一个能够制作出无限循环展示的jQuery内容滑块插件。这个内容滑块插件的下方还有一个“more”内容块，点击它可以调出更详细的文字说明。

使用者可以通过点击前后导航按钮或用鼠标前后滚动来控制内容滑块的前进和后退。

HTML

<div id="ca-container" class="ca-container">
    <div class="ca-wrapper">
        <div class="ca-item ca-item-1">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>Stop factory farming</h3>
                <h4>
                    <span class="ca-quote">“</span>
                    <span>Some text...</span>
                </h4>
                    <a href="#" class="ca-more">more...</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>Animals are not commodities</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>Some more text...</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ca-item ca-item-2">
            ...
        </div>
        ...
    </div><!-- ca-wrapper -->
</div><!-- ca-container -->

调用方法

$('#ca-container').contentcarousel();

可用参数

$('#ca-container').contentcarousel({
    // speed for the sliding animation
    sliderSpeed     : 500,
    // easing for the sliding animation
    sliderEasing    : 'easeOutExpo',
    // speed for the item animation (open / close)
    itemSpeed       : 500,
    // easing for the item animation (open / close)
    itemEasing      : 'easeOutExpo',
    // number of items to scroll at a time
    scroll          : 1 
});