jQuery Slidorion自动切换选项图片轮播的手风琴效果

当前位置:主页 > jQuery库 > 手风琴 > jQuery Slidorion自动切换选项图片轮播的手风琴效果
jQuery Slidorion自动切换选项图片轮播的手风琴效果
分享:

    插件介绍

    jQuery slidorion将手风琴效果和图片轮播完美的结合在一起,使用手风琴效果替代了传统图片轮播中使用的滑块。这个插件是使用手风琴效果的一个不错的选择。

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-19
    阅读:

简要教程

这个插件集成了幻灯片效果和手风琴效果。幻灯片能够展示漂亮的图片的说明文字,每一张图片都和一个tab关联。这个插件是使用手风琴效果的一个不错的选择。

使用方法

引入jQuery、jQuery UI和jquery.slidorion.js文件。

HTML结构

<div id="slidorion">
    <div id="slider">
        <div class="slider-image" rel="section1">
            <img src="sample.jpg" width="500" height="400" />
        </div>
        <div class="slider-image" rel="section2">
            <img src="sample.jpg" width="500" height="400" />
        </div>
        <div class="slider-image" rel="section3">
            <img src="sample.jpg" width="500" height="400" />
        </div>
    </div>
    <div id="accordion">
        <div class="header"><a class="slider-link" rel="section1">Kung Fu Panda 2</a></div>
        <div class="content">
            <!-- CONTENT GOES HERE -->
        </div>
        <div class="header"><a class="slider-link" rel="section2">The Dark Knight</a></div>
        <div class="content">
            <!-- CONTENT GOES HERE -->
        </div>
        <div class="header"><a class="slider-link" rel="section3">Hot Fuzz</a></div>
        <div class="content">
            <!-- CONTENT GOES HERE -->
        </div>
    </div>
</div> 
                

基本调用方法

<script>
$(document).ready(function(){
    $('#slidorion').slidorion();
});
</script>
                

可用参数

<script>
$(document).ready(function(){
    $('#slidorion').slidorion({
        speed: 1000,
        interval: 4000,
        effect: 'slideLeft'
    });
});
</script>
                

更多信息:http://www.slidorion.com/

上一篇:没有了