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

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

 11374  51  查看评论 (47)
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
相关插件-幻灯片和轮播图

炫酷html5+css3响应式焦点图

炫酷html5+css3响应式焦点图,支持非响应前段布局。
  幻灯片和轮播图
 12007  58

带进度条的jQuery轮播图

带进度条jQuery轮播图,可左右切换、按钮切换
  幻灯片和轮播图
 13035  87

jquery分层轮播插件jquery.zySlide

jquery实现分层轮播3d旋转效果
  幻灯片和轮播图
 20009  96

原声 JS + Jquery + 面向对象轮播图

几个效果的轮播图,最后组成个组件效果,可供学习
  幻灯片和轮播图
 19738  91

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

    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/3/28 15:11:43

    页面一打开的时候不显示,要刷新一下才行,求指教!

    jQuery(document).ready(function($) {
           $(".dnSlide-main").each(function(index, el) {
               $(el).dnSlide(
                   {
                       "response" : true ,
                       "posterFirstWidth"?:?600,??????//First?Picture?Width
                       "posterFirstHeight" : 180,
                       "postWidth":600,
                       "postHeight":180,
                       "width":600,
                       "height":180,
                       verticalAlign : "bottom" ,
                       afterClickBtnFn :function(i){ console.log(i); }
                   }
               );
           });
       });
        佬鸡0
        2018/3/30 10:34:06
        兄弟。我在本地并没有这种问题。但是在jq22就会出现
    回复
    web前端-张超怡 0
    2018/3/6 14:05:45
    点击可以切换到相对应的板块的效果不能和按钮共同控制切换吗?
        佬鸡0
        2018/3/6 14:06:53
        不可以的。。分开的
    回复
    隐形的木板 0
    2018/2/4 16:56:01

    请问,只能一张一张切换吗? 能不能我在图片3处点击图片1,然后跳转到图片1呢?

        佬鸡0
        2018/2/4 20:02:56

        是的。目前只支持一张张切换。你说的效果可以考虑下次加入

        佬鸡0
        2018/2/26 8:54:25
        兄弟,你要的点击切换对于图片效果已完成;参考:https://github.com/devin-huang/dnslide 
    回复
    Continue╀ 0
    2018/1/30 11:50:59

    虽然我已经改好了、、、但是回复速度还是给你满分!

        佬鸡0
        2018/1/30 12:02:18

        谢谢!

    回复
    Continue╀ 0
    2018/1/30 11:39:56

    我不想要触摸就暂停自动播放。要让他一直播放。不停

        佬鸡1
        2018/1/30 11:45:58

        寻找源码中:

        this.container.hover(function() {
            clearTimeout(_this_.timer);
        }, function() {
            _this_.autoPlay();
        });

        去掉既可以了

    回复
取消回复