一款图片无缝滚动的控件

图片滚动效果

在应用中要实现图片的滚动&＃xff0c;由于对前端也不是很熟悉&＃xff0c;所以找了半天&＃xff0c;发现一个比较好的控件--jQuery cxScroll &＃xff0c;能够满足我的需求。下面简单介绍下&＃xff08;当然也是从其官方文档上抄的咯&＃xff09;

载入 Javascript 文件

CSS 样式结构 除必要属性设置外&＃xff0c;其他样式均可自行设置。

/* 横向滚动基本样式 */
.cxscroll{}
.cxscroll .box{overflow:hidden;width:600px;}
.cxscroll .list{overflow:hidden;width:9999px;}
.cxscroll .list li{float:left;width:200px;height:100px;}
.cxscroll .prev{}
.cxscroll .next{}/* 纵向滚动基本样式 */
.cxscroll{}
.cxscroll .box{overflow:hidden;height:300px;}
.cxscroll .list{}
.cxscroll .list li{height:100px;}
.cxscroll .prev{}
.cxscroll .next{}


DOM 结构

调用 cxScroll

$(&＃39;#element_id&＃39;).cxScroll();


参数 名称 默认值 说明 direction &＃39;right&＃39; 滚动方向。可设置为&＃xff1a;"left", "right", "top", "bottom" easing &＃39;swing&＃39; 缓动方式 step 1 滚动步长 accel 200 手动滚动速度 (ms)&＃xff0c;点击控制按钮滚动的速度。 speed 800 自动滚动速度 (ms) time 4000 自动滚动间隔时间 (ms) auto true 是否自动滚动 hoverLock true 鼠标移入移出锁定。鼠标进入区域内时停止自动轮播&＃xff0c;离开后恢复自动轮播&＃xff08;仅在 auto 为 true 时有效&＃xff09; prevBtn true 是否使用 prev 按钮 nextBtn true 是否使用 next 按钮

接口

var Api;
$(&＃39;#element_id&＃39;).cxScroll(function(api){Api &＃61; api;
});
// 或者作为第二个参数传入
$(&＃39;#element_id&＃39;).cxScroll({minus: true,plus: true
}, function(api){Api &＃61; api;
});


名称 说明 play() 开始自动播放 stop() 停止自动播放 prev(speed) 向前滚动。speed 为滚动速度(ms) next(speed) 向后滚动。speed 为滚动速度(ms)

文档地址&＃xff1a;http://code.ciaoca.com/jquery/cxScroll/

问题

目前都比较正常&＃xff0c;只是在ul 里 包含很多图片时&＃xff0c;后面一部分显示不出来&＃xff0c;就停住了&＃xff0c;不知道什么原因