关闭

Jquery 图片轮播的插件

标签: jquery图片轮播图片html插件
305人阅读 评论(0) 收藏 举报
分类:

前提要引入: jquery这是必然不上少的。

<script src="style/js/jquery.min.js"></script>

其次就是引入插件

<script type="text/javascript" src="style/js/responsiveslides.min.js"></script>

下载链接:http://pan.baidu.com/s/1kTgxAWR 密码:tvpf

如何使用呢:

html

<ul class="rslides">
            <li><img src="images/a1.jpg" alt=""></li>
            <li><img src="images/a2.jpg" alt=""></li>
            <li><img src="images/a3.jpg" alt=""></li>
        </ul>
$(".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 : "上一页", // String: 往前翻按钮的显示文本
            nextText : "下一页", // 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: 回调之后的参数
        });

介绍完毕。

1
0
查看评论

12款经典图片轮播jquery插件

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你。   Nivo ...
  • judyge
  • judyge
  • 2016-07-17 18:52
  • 229

jquery轮播图插件unslider

插件描述:unslider.min.js 体积仅 2.56kb ,却能满足绝大部分网站的轮播需求。支持响应式,最低支持到IE6(亲测)。可以使用CSS进行完全的自定义。 举一个最常见的轮播图例子,五张轮播图 + 圆点指示器 + 左右箭头。 -- 首先引入jQuery和unslider --&...
  • weixin_37194108
  • weixin_37194108
  • 2017-04-21 17:34
  • 774

最新的jQuery/HTML5图片轮播插件

最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷。这次我们特意为大家筛选了一些最新的jQuery/HTML5图片轮播插件,每一个的功能都比较强大,当然可能不是每一个都适合你,但你也可以从中学到...
  • hzp666
  • hzp666
  • 2017-09-18 14:43
  • 518

slidesjs响应式图片轮播展示插件,支持触摸

今天为大家介绍的是一个名为SlidesJS的响应式图片轮播展示的插件,他拥有触摸和CSS3动画过渡的特性。       概述特性:       1.响应式。能够动态创建出适合任何一种屏幕的图片展示效果。   &#...
  • renyiqiu
  • renyiqiu
  • 2013-11-20 22:47
  • 9825

用jquery实现图片轮播

CSS样式: *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其实就是图片的高度*/ border: ...
  • liuxuekai
  • liuxuekai
  • 2016-07-16 18:04
  • 6835

jQuery Mobile图片轮转轮播

最近一直很忙,刚抽出一点时间,来看了一下camera,非常好用,这里分享一下,与大家共勉!
  • xmt1139057136
  • xmt1139057136
  • 2014-10-15 10:39
  • 9705

介绍一个十分好用的JQUERY图片放大镜插件

介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图,传统的另外打开一张大图的话,不大COOL,所以找到了这个插件,插件下载地址:http://www.mind-projects.it/projects/jqzoom/简单介绍下,在下载后,要准...
  • liwen19840617
  • liwen19840617
  • 2009-12-25 16:36
  • 2905

jquery幻灯轮播图,支持触屏wap站,代码如下。

基于jQuery的移动轮播图(支持触屏) .WSCSlideWrapper{ width: 420px; height: 180px; position: relative; overflow: hidden; ...
  • muziduoxi
  • muziduoxi
  • 2014-06-27 13:51
  • 6658

如何编写jquery插件之轮播图

对于一位合格的前端开发人员来说,首页图片轮播可谓是必会的基本功。那么我们聊一聊如何用jquery封装自己的轮播插件。 首先必须要聊到的jquery为我们提供的两大扩展方法,$.fn和$.extend(),$.extend相当于为jQuery类(注意,JavaScript并没有类,我们只是以类来理解...
  • Brave_Coder
  • Brave_Coder
  • 2016-08-17 09:40
  • 2271

几个不错的基于jquery的js图片轮播插件

基于jquery的图片轮播插件,都是基于js的插件,链接一下。第一个: bootstrap提供的图片轮播插件第二个: 12款经典的jquery图片轮播插件
  • kmust20093211
  • kmust20093211
  • 2015-09-04 16:05
  • 900
    个人资料
    • 访问:297259次
    • 积分:4220
    • 等级:
    • 排名:第8594名
    • 原创:148篇
    • 转载:8篇
    • 译文:0篇
    • 评论:56条
    博客专栏