zoukankan      html  css  js  c++  java
  • 图片轮播插件

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

    时不我待,不负韶华!立刻行动!不吃学习的苦就会吃生活的苦!
  • 相关阅读:
    RAD Studio最终版合集
    cxGrid 锁定一行,让该行数据不能编辑
    跨平台打开一个URL的方法
    【转】DELPHI开始支持LINUX DOCKER
    HTTP请求的拦截
    SVG图像
    Kafka
    HBase分布式集群部署
    HBase
    Mapreduce提交YARN集群运行
  • 原文地址:https://www.cnblogs.com/zrp2013/p/3081381.html
Copyright © 2011-2022 走看看