图片轮播插件

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

时不我待,不负韶华!立刻行动!不吃学习的苦就会吃生活的苦!
原文地址:https://www.cnblogs.com/zrp2013/p/3081381.html