基于jquery的轻量级无缝轮播插件(原创)

所属分类:媒体-幻灯片和轮播图

 37508  354  查看评论 (28)
分享到微信朋友圈
X
基于jquery的轻量级无缝轮播插件(原创) ie兼容6

更新时间:2018/1/9 上午11:47:04

更新说明:修正载入的方式为    对象.swiper({参数}) ,兼容IE8、9、10


使用方法

发布时间:2018-1-9 0:09

在样式表中对对象的max-width设置宽度,并且在参数中设置好宽高比即可使用。

在<script>标签中windows.onload调用:对象.swiper({参数})                 

例如:

.box {
    max - width: 720 px; /***   这里的max-width值就是图片的宽度   ***/
}.box1 {
    max - width: 750 px; /***   这里的max-width值就是图片的宽度   ***/
}
$("#box1").swiper({
    ratio: 8 / 5,
    time: 4000,
    stop: true,
    direction: "left"
});
$("#box").swiper({
    time: 2000,
    base: false,
    ratio: 290 / 163
});

具体参数如下:

  • direction:"right",   //如果设置自动滚动,值为"left"向左,值为"right"向右 默认"right"

  • ratio:16/9,            //设置图片宽高比  默认16/9

  • time:3000,             //自动滚动间隔,单位:毫秒,为0时不自动滚动  默认3秒

  • base:!0,               //是否创建底部按钮,值为"true"或"flase"  默认"true"

  • btn:!0,                //是否显示左右按钮,值为"true"或"flase"   默认"true"

  • over:!0,               //是否拥有鼠标经过动画,值为"true"或"flase"   默认"true"

  • stop: !0,              //是否鼠标悬停停止滚动,值为"true"或"flase"   默认"true"

相关插件-幻灯片和轮播图

SuperSlidev2.1焦点图幻灯片tab

SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
  幻灯片和轮播图
 44831  426

jQuery轮播图带切换进度显示

基于jQuery SuperSlide 实现的轮播图带切换进度显示
  幻灯片和轮播图
 19406  225

jQuery百叶窗轮播插件Shutter

兼容至IE8的自适应百叶窗轮播,切换效果多样。
  幻灯片和轮播图
 40681  405

jquery 幻灯片以及tabs切换插件

jquery 幻灯片以及tabs切换插件
  幻灯片和轮播图
 27444  355

讨论这个项目(28)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    cc.??? 0
    2019/1/3 20:43:49
    不错啊 ,还能调节宽高比 回复
    小小明明1 0
    2018/12/3 16:39:49
    如何可以调整他换图的速度 回复
    抗塔天才伊泽诱饵 0
    2018/11/26 15:56:49
    Wind 0
    2018/7/20 17:05:15
    想要固定的宽高,不用自适应要怎么改啊?同时我需要应用到多次这个效果!
        Wind0
        2018/7/20 17:20:53
        这个问题已经解决了,但又发现个不完美的地方,
        下面小圆页码这处没有加上我们页码所占的宽度,实际用的时候发现页码并没有水平居中。因为计算的原因,不知道自己可以怎么优化?
    回复
    WantonRoar 0
    2018/7/18 23:45:57
    づ葬心 0
    2018/6/16 14:55:21
    能解决兼容问题,感觉很棒 回复
    hinsdiff 0
    2018/5/31 9:47:46
    看起来的确很轻量,试试看.. 回复
    人生如戏,全靠演技 0
    2018/5/16 16:53:42
    浏览器大小自适应宽高。手机自适应吗? 我在查看演示的时候点击手机屏幕,然后就出现不适应的状况 回复
    quiter_hungry 0
    2018/5/1 11:40:07
    才阿 0
    2018/3/27 15:46:49
    不错啊 ,还能调节宽高比
        YanGo0
        2018/4/14 9:57:29
        不错,刚好可以用来做毕业设计
        stefan-雷吉兴(前端)0
        2018/4/28 15:25:54
        可以发一份吗?245725316@qq.com
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复