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

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

 2651  11  查看评论 (4)
基于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"

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

jquery轮播图插件

jquery轮播图插件支持横向滚动和垂直滚动
  幻灯片和轮播图
 23669  155

基于jquery仿QQiPhone首页

基于jquery仿QQiPhone首页效果清新实用
  幻灯片和轮播图
 6995  8

jQuery 3D轮播图

自适应屏幕的3D轮播图加炫酷背景
  幻灯片和轮播图
 11471  76

带缩略图的图片点击切换

jCarousel带缩略图的图片点击切换插件
  幻灯片和轮播图
 10407  57

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    つ风吹起如花般细碎的流年 0
    2018/1/16 9:54:59
    红色石头 0
    2018/1/11 16:07:39
    【Because。】 0
    2018/1/10 9:43:44

    已兼容IE,第一次做这东西,略有不足,有任何建议欢迎提出。

    回复
    【Because。】 0
    2018/1/9 16:49:18

    Emmmmmmm....新版本兼容IE8、9、10。 已经上传更新,审核比较慢需要的可以稍作等待再来下载。

    回复
取消回复