图片轮播插件
插件的下载地址: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://www.jq-school.com/tool/jc/jQuery-jcSlider/demo.html
时不我待,不负韶华!立刻行动!不吃学习的苦就会吃生活的苦!