jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)_jq 响应式轮播图通常用哪个插件-优快云博客

ResponsiveSlides.js是一款轻量级响应式的jQuery幻灯片插件，支持多种浏览器，包括IE6，并且仅需792字节。该插件提供三种模式：图片自动淡入淡出、使用页码标签切换及手动左右切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ResponsiveSlides.js

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。

特点：

1.文件较小(通过缩减和gz压缩只有792字节)

2.功能简单(ResponsiveSlides.js只支持三种模式：图片自动淡出淡入和使用页码标签，或者左右来手动切换图片。)

浏览器支持：

Internet Explorer 6,7,8,9
Firefox 3,6,8,11
Safari 5,5.1
Chrome 15,20
Opera 11,11.6
iOS Safari
Symbian 3 Webkit
Opera Mobile 10.1
Opera Mini for iOS
IE7, IE9 Mobile
Firefox Mobile
Android 2.3+
Kindle browser

使用方法：

1. 引入文件

 
        <script src=
        "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
        ></script>
       
        <script src=
        "responsiveslides.min.js"
        ></script>

2. 添加HTML标记

3. 添加CSS

 
        .rslides {
       
        position
        : 
        relative
        ;
       
        list-style
        : 
        none
        ;
       
        overflow
        : 
        hidden
        ;
       
        width
        : 
        100%
        ;
       
        padding
        : 
        0
        ;
       
        margin
        : 
        0
        ;
       
        }
       
        .rslides li {
       
        -webkit-backface-
        visibility
        : 
        hidden
        ;
       
        position
        : 
        absolute
        ;
       
        display
        : 
        none
        ;
       
        width
        : 
        100%
        ;
       
        left
        : 
        0
        ;
       
        top
        : 
        0
        ;
       
        }
       
        .rslides li:first-child {
       
        position
        : 
        relative
        ;
       
        display
        : 
        block
        ;
       
        float
        : 
        left
        ;
       
        }
       
        .rslides img {
       
        display
        : 
        block
        ;
       
        height
        : 
        auto
        ;
       
        float
        : 
        left
        ;
       
        width
        : 
        100%
        ;
       
        border
        : 
        0
        ;
       
        }

4. 调用

 
        <script>
       
        $(
        function
        () {
       
        $(
        ".rslides"
        ).responsiveSlides();
       
        });
       
        </script>

参数：

 
        $(
        ".rslides"
        ).responsiveSlides({
       
        auto: 
        true
        ,             
        // Boolean: 设置是否自动播放, true or false
       
        speed: 500,            
        // Integer: 动画持续时间，单位毫秒
       
        timeout: 4000,          
        // Integer: 图片之间切换的时间，单位毫秒
       
        pager: 
        false
        ,           
        // Boolean: 是否显示页码, true or false
       
        nav: 
        false
        ,             
        // Boolean: 是否显示左右导航箭头（即上翻下翻）, true or false
       
        random: 
        false
        ,          
        // Boolean: 随机幻灯片顺序, true or false
       
        pause: 
        false
        ,           
        // Boolean: 鼠标悬停到幻灯上则暂停, true or false
       
        pauseControls: 
        true
        ,    
        // Boolean: 悬停在控制板上则暂停, true or false
       
        prevText: 
        "Previous"
        ,   
        // String: 往前翻按钮的显示文本
       
        nextText: 
        "Next"
        ,       
        // String: 往后翻按钮的显示文本
       
        maxwidth: 
        ""
        ,           
        // Integer: 幻灯的最大宽度
       
        navContainer: 
        ""
        ,       
        // Selector: Where controls should be appended to, default is after the 'ul'
       
        manualControls: 
        ""
        ,     
        // Selector: 声明自定义分页导航
       
        namespace: 
        "rslides"
        ,   
        // String: 修改默认的容器名称
       
        before: 
        function
        (){},   
        // Function: 回调之前的参数
       
        after: 
        function
        (){}     
        // Function: 回调之后的参数
       
        });