您的位置:首页 > 其它

图片轮播插件

2013-05-16 10:57 274 查看
插件的下载地址:ScrollPic.js

使用方法


// 先加载ScrollPic.js插件后再执行以下语句
window.onload = function(){
scrollPic_01 = new ScrollPic();
scrollPic_01.scrollContId   = "pic"; //图片容器ID
scrollPic_01.arrLeftId      = "left"; //左按钮ID
scrollPic_01.arrRightId     = "right"; //右按钮ID
scrollPic_01.frameWidth     = 840; //图片容器宽度
scrollPic_01.pageWidth      = 210; //每张图片宽度
scrollPic_01.speed          = 10; //移动速度(单位毫秒,越小越快)
scrollPic_01.space          = 10; //每次移动像素(单位px,越大越快)
scrollPic_01.autoPlay       = false; //自动播放
scrollPic_01.autoPlayTime   = 3; //自动播放间隔时间(秒)
scrollPic_01.initialize();  //初始化
}


处理浏览器兼容问题:

浮动在IE与标准的浏览器的js写法是不同的 IE是 styleFloat,标准的为cssFloat’

所以在ScrollPic.js文件中,找到以下代码
this.listDiv01.style.cssFloat="left";this.listDiv02.style.cssFloat="left";

要判断如果是IE:
this.listDiv01.style.styleFloat="left";this.listDiv02.style.styleFloat="left";
因此具体方法是:

将ScrollPic.js中的
this.listDiv01.style.cssFloat="left";this.listDiv02.style.cssFloat="left"
改为:
if(!+[1,]){this.listDiv01.style.styleFloat="left";this.listDiv02.style.styleFloat="left";}else{this.listDiv01.style.cssFloat="left";this.listDiv02.style.cssFloat="left";}


DEMO1地址:www.qttc.net/demo/scrollpic

DEMO2地址:haier2.vliang.com

还有一个比较好的横向滚动插件:http://***/tool/jc/jQuery-jcSlider/demo.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: