jQuery旋转木马幻灯片插件poster.js

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

 37781  378  查看评论 (62)
分享到微信朋友圈
X
jQuery旋转木马幻灯片插件poster.js ie兼容8

更新时间:2018/2/27 上午9:00:05

更新说明:添加插件陈述


更新时间:2018/2/26 上午9:06:07

更新说明:

1. 添加了可点击当前图片切换
2. 修改样式
3. 代码修复


更新时间:2018/2/2 下午6:07:27

更新说明:1.命名规范. 2.添加页面信息


更新时间:2018/1/22 上午10:54:52

更新说明:

修复了自动播放BUG添加插件的API与点击事件修改了UI的展示效果与多个展示出现报错的问题

属性列表描述类型默认值
width幻灯片总宽度Number800
height幻灯片总高度234
postWidth第一帧图片宽度600
postHeight第一帧图片高度234
scale每一帧的缩放比例0.9
speed幻灯片跳转的速度500
verticalAlign布局方式(top:上、middle:中、bottom:下)Stringmiddle
autoPlay是否自动播放Booleanfalse
delay幻灯片自动播放的间隔时间Number5000
afterClickBtnFn自带参数i:代表当前的图片索引值 ,afterClickBtnFn :function(i){  }FunctionNull
API说明使用方式
init初始化var api = $(el).poster(setting).data( "poster" ); api.init();
destroy销毁同上
hide隐藏同上
show显示同上

更新时间:2017/12/11 下午2:28:12

更新说明:更新了能够兼容IE7 IE6


更新时间:2017/12/1 上午9:44:59

更新说明:

1. 默认参数添加了 isOddShow 用于偶数时是否复制一张,默认是需要复制防止错位

2. 更为实用jquery的$(".poster-main").poster(setting); 引用

属性列表说明默认值
width幻灯片总宽度800
height幻灯片总高度234
postWidth第一帧图片宽度600
postHeight第一帧图片高度234
scale每一帧的缩放比例0.9
speed幻灯片跳转的速度500
verticalAlign布局方式(top:上、middle:中、bottom:下)middle
autoPlay是否自动播放false
delay幻灯片自动播放的间隔时间5000
相关插件-幻灯片和轮播图

jQuery轮播图插件

jQuery滑动式轮播图插件
  幻灯片和轮播图
 39482  360

jQuery带缩略图轮播图插件SliderPro

jQuery基于SliderPro实现的左右布局带缩略图轮播图效果
  幻灯片和轮播图
 45078  453

可拖动的轮播插件(视频存在进度条,swiper插件)

可以拖拽实现切换图片,可以将图片和视频一起实现滑动。视频存在进度条,进度条完毕,实现切换
  幻灯片和轮播图
 38395  372

jQuery轮播图支持手机端拖拽轮播(原创)

jQuery轮播图支持移动端拖拽轮播,兼容性好
  幻灯片和轮播图
 22977  281

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

    驴夫人. 0
    2019/8/8 16:59:42
    怎么做自适应哇 他的宽高都是写死的
        佬鸡0
        2019/8/8 17:04:03
        目前仅支持整个插件的自适应。 写死得宽高只是第一个张图片,因为后面第2张图片开始都是根据上一张图片缩放的
        驴夫人.0
        2019/8/8 17:04:51
        那做自适应 是不行的吗
    回复
    杨小爷 0
    2019/5/17 17:22:17
    这个插件有局限性,比如我有20条数据,始终显示7个,就做不到了 回复
    迁徙 0
    2018/8/31 17:41:32
    浏览器有时候不能计算高度,然后导致图片排版错位,没有动画效果
        佬鸡1
        2018/12/4 18:24:33
        要不你写在load里面。ready 可能DOM并没生成导致计算不正确
    回复
    负负得正i 0
    2018/6/14 19:21:03
    修改宽度做不到的吗
        佬鸡0
        2018/12/4 18:21:57
        因为设计初衷是考虑响应式,所以单一图片宽高都不能设置(除了第一张)。
    回复
    前端-技术部 0
    2018/6/13 13:24:31
    怎么设置点击点击当前图片切换 回复
    ????????? 0
    2018/5/3 9:58:42
    请问下怎么添加图片的描述呢?因为用的时候需要点击图片跳转链接,还需要图片的描述,但是自己添加了a标签跳转和描述以后,文本描述的标签都没有了... 回复
    'Mirinda 0
    2018/4/24 15:30:26
    哈哈 自己改下更完美
        佬鸡0
        2018/4/24 15:31:44
        怎么改了。。求分享
    回复
    采编-王胜利 0
    2018/4/23 16:07:16
    赞一个 刚好用到 回复
    Melin00 0
    2018/4/5 15:40:10
    safari或者chrome浏览器有时候不能计算高度
        佬鸡0
        2018/4/5 16:08:34
        那你把整个函数写在load里面,大概是因为目前是写在ready里面
    回复
    Melin00 0
    2018/4/5 15:29:40
    safari或者chorme一进去元素高度为0,动画也不正常了 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复