jquery带缩略图的内容滑块插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jquery带缩略图的内容滑块插件
jquery带缩略图的内容滑块插件
分享:

    插件介绍

    这是一款带缩略图的jQuery内容滑块插件。点击内容滑块的缩略图可以切换大图,并可以通过“read more”链接查看图片的详细信息。这个jQuery内容滑块插件有自动播放和手动播放两种模式。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-06
    阅读:

简要教程

这个内容滑块插件的html结构使用cr-content-wrapper包住所有的大图和图片信息。其中每一个cr-content-containerdiv需要一个id来指向每一张缩略图对应的data-content

插件中使用的电影封面插图来自于花瓣

HTML

<div class="cr-container" id="cr-container">
    <div class="cr-content-wrapper" id="cr-content-wrapper">
        <div class="cr-content-container" id="content-1" style="display:block;">
            <img src="images/1.jpg"class="cr-img"/>
            <div class="cr-content">
                <div class="cr-content-headline">
                    <h2>The slide title</h2>
                    <h3>
                        <span>Some sub-title</span> 
                        <a href="#" class="cr-more-link"> read more →</a>
                    </h3>
                </div>
                <div class="cr-content-text">
                    <p>Some text here...</p>
                </div>
            </div><!-- cr-content -->
        </div><!-- cr-content-container -->
        <div class="cr-content-container" id="content-2">
            ...
        </div><!-- cr-content-container -->
        ...
    </div><!-- cr-content-wrapper -->
    <div class="cr-thumbs">
        <div data-content="content-1" class="cr-selected">
            <img src="images/thumbs/1.jpg"/>
            <h4>The slide title</h4>
        </div>
        <div data-content="content-2">
            <img src="images/thumbs/2.jpg"/>
            <h4>Another slide title</h4>
        </div>
        ...
    </div><!-- cr-thumbs -->
</div><!-- cr-container -->
                

调用方法

$('#cr-container').crotator();
                

可用参数

$('#cr-container').crotator({
    // slideshow on
    autoplay            : false,
    // slideshow interval
    slideshow_interval  : 3000,
    // if true the thumbs will be shown initially
    openThumbs          : true,
    // speed that the thumbs are shown / hidden
    toggleThumbsSpeed   : 300
});