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

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

 13456  61  查看评论 (54)
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仿flash漂亮横向图片滚动效果

jquery仿flash漂亮横向图片滚动效果
  幻灯片和轮播图
 15367  55

jQuery仿百度新闻首页焦点图

jQuery仿百度新闻首页焦点图
  幻灯片和轮播图
 20940  113

jQuery仿腾讯图片新闻组图幻灯

jQuery仿腾讯图片新闻组图幻灯
  幻灯片和轮播图
 11206  123

jquery原创图片切换插件drawerSwitch

jquery原创图片切换插件drawerSwitch
  幻灯片和轮播图
 6764  25

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

    负负得正i 0
    2018/6/14 19:21:03
    修改宽度做不到的吗 回复
    前端-技术部 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,动画也不正常了 回复
    Melin00 0
    2018/4/5 14:25:12
    Cannot read property 'apply' of null
    at c.(anonymous function).dnSlideRotate

    报错 回复
    大帅比欧尼 0
    2018/4/2 11:28:55
    我改图片的高度怎么没有作用啊,求教 回复
    ?守夜人╃ 0
    2018/3/30 9:53:59
    我如何让图片更加紧凑点?
        佬鸡0
        2018/3/30 10:32:54
        插件原理是自动计算位置的,图片越多越紧凑。也有一种办法可以实现你的需求。就是把总宽度设短
        ?守夜人╃0
        2018/3/30 10:56:11
        我把 .dnSlide-main 和 .dnSlide-list 都原来的100%宽度都缩小了。还是不行呢,大佬
        佬鸡0
        2018/4/23 16:27:14
        因为我后来改动了。现在是响应式的。所以改变宽度看不出来效果。但是你可以修改外层DIV宽度控制
    回复
取消回复