图片轮播插件

  插件的下载地址：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