zoukankan      html  css  js  c++  java
  • rotate with different image(轮换显示图片)

    新建一个Content Editor Web Part,修改其Source Editor,添加以下代码:

    <script type="text/javascript">
    /*  dw_rotator.js  JavaScript rotate images code  version date: April 2005  */

    dw_Rotator.restartDelay = 500; // delay onmouseout before call to rotate
    dw_Rotator.col = [];

    // arguments: image name, rotation speed, path to images (optional),
    // target, i.e. name of window to direct url's to onclick (optional)
    function dw_Rotator(name, speed, path, tgt) {
        this.name = name; this.speed = speed || 4500; // default speed of rotation
        this.path = path || ""; this.tgt = tgt;
        this.ctr = 0; this.timer = 0; this.imgs = []; this.actions = [];
        this.index = dw_Rotator.col.length; dw_Rotator.col[this.index] = this;
        this.animString = "dw_Rotator.col[" + this.index + "]";
    }

    dw_Rotator.prototype.addImages = function() { // preloads images
        var img;
        for (var i=0; arguments[i]; i++) {
            img = new Image();
            img.src = this.path + arguments[i];
            this.imgs[this.imgs.length] = img;
        }
    }

    dw_Rotator.prototype.addActions = function() {
        var len = arguments.length; // in case an argument's value is null
        for (var i=0; i < len; i++)
            this.actions[this.actions.length] = arguments[i];
    }

    dw_Rotator.prototype.rotate = function() {
        clearTimeout(this.timer); this.timer = null;
        if (this.ctr < this.imgs.length-1) this.ctr++;
        else this.ctr = 0;
        var imgObj = document.images[this.name];   
        if (imgObj) {
            imgObj.src = this.imgs[this.ctr].src;
            this.timer = setTimeout( this.animString + ".rotate()", this.speed);
        }
    }

    // Start rotation for all instances
    dw_Rotator.start = function() {
        var len = dw_Rotator.col.length, obj;
        for (var i=0; i<len; i++) {
            obj = dw_Rotator.col[i];
            if (obj && obj.name ) // check for empty instance created by dw_random.js
                obj.timer = setTimeout( obj.animString + ".rotate()", obj.speed);
        }
    }

    // called onclick of images
    dw_Rotator.doClick = function(n) {
        var obj = dw_Rotator.col[n];
     if ( !document.images || !obj ) return true;
        if ( obj.actions && obj.actions[obj.ctr] ) {
            if ( typeof obj.actions[obj.ctr] == "string" ) { // url
                if ( obj.tgt ) { // open in separate window
                    // add features here if you want, i.e., chrome, size, position, ...
                    var win = window.open(obj.actions[obj.ctr], obj.tgt);
                    if ( win && !win.closed ) win.focus();
                } else {
                    window.location = obj.actions[obj.ctr];
                }
            } else { // function pointer
                obj.actions[obj.ctr](); // execute function
            }
        }
        return false;
    }

    // for stopping/starting onmouseover/out
    dw_Rotator.pause = function(n) { 
        dw_Rotator.clearTimers(n);
    }

    dw_Rotator.clearTimers = function(n) {
        var obj = dw_Rotator.col[n];
        if ( obj ) {
            clearTimeout( obj.timer ); obj.timer = null;
        }
    }

    dw_Rotator.resume = function(n) {
        dw_Rotator.clearTimers(n);
        var obj = dw_Rotator.col[n];
        if ( obj ) {
            obj.timer = setTimeout( obj.animString + ".rotate()", dw_Rotator.restartDelay );
        }
    }

    </script>
    <script type="text/javascript">
    /* 
        dw_random.js - random image rotation - version date: April 2005
        requires dw_rotator.js
    */


    // dw_RandRotator is subclass of dw_Rotator
    // it has its own rotate method, and adds a setupImage method
    dw_RandRotator.prototype = new dw_Rotator();

    // constructor arguments: (all optional) rotation speed, path to images,
    // linked? (boolean), mouse events? (boolean), target window name
    function dw_RandRotator(sp, pt, bClickable, bMouse, tgt) {
        this.num = dw_Rotator.col.length; this.name = "RandRotateImg" + this.num;
        this.mouseEvs = bMouse; this.clickable = bClickable;
        // call method available to replace following 2 steps as of JS 1.3 (ns6/ie5.5)
        this.rObj = dw_Rotator; this.rObj(this.name, sp, pt, tgt);
    }

    // arguments: images array, width and height of images, transition filter? (boolean)
    dw_RandRotator.prototype.setUpImage = function(imgAr, w, h, bTrans) {
        this.trans = bTrans;
        this.ctr = Math.floor( Math.random() * imgAr.length );
        var img = imgAr[ this.ctr ];
        var imgStr = '<img name="' + this.name + '" src="' + this.path + img + '"';
        imgStr += ( typeof w == "number") ? ' width="' + w + '"': '';
        imgStr += ( typeof h == "number") ? ' height="' + h + '"': '';
        imgStr += ' alt="">';
        var str = "";
        if (this.clickable) { // link it
            str += '<a href="" onclick="return dw_Rotator.doClick(' + this.num + ')"';
            if (this.mouseEvs) {
                str += ' onmouseover="dw_Rotator.pause(' + this.num + ')"'
                str += ' onmouseout="dw_Rotator.resume(' + this.num + ')"';
            }
            str += ' onfocus="this.blur()">' + imgStr + '</a>';
        } else {
            str = imgStr;
        }
        document.write(str); document.close();
        for (var i=0; imgAr[i]; i++) this.addImages( imgAr[i] );
    }

    dw_RandRotator.prototype.rotate = function() {
        clearTimeout(this.timer); this.timer = null;
        var ctr = Math.floor( Math.random() * this.imgs.length );
        // repeat attempts to get new image, if necessary
        var i = 0;
        while ( ctr == this.ctr && i < 6 ) {
            ctr = Math.floor( Math.random() * this.imgs.length );
            i++; // limit # of loops
        }
        this.ctr = ctr;
        var imgObj = document.images[this.name];
        if (!imgObj) return;
        if ( this.trans && typeof imgObj.filters != "undefined" ) {
            imgObj.style.filter = 'blendTrans(duration=1)';
            if (imgObj.filters.blendTrans) imgObj.filters.blendTrans.Apply();
        }
        imgObj.src = this.imgs[this.ctr].src;
        if ( this.trans && typeof imgObj.filters != "undefined" && imgObj.filters.blendTrans )
            imgObj.filters.blendTrans.Play();

        this.timer = setTimeout( this.animString + ".rotate()", this.speed);                       
    }
    // rotation speed, path to images (optional)
    var rotator1 = new dw_RandRotator(4000, "/sites/NewBizDev/Inspirations/");
    var imgList = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg"];
    // images array, width and height of images, transition filter (boolean)
    rotator1.setUpImage(imgList , 306, 187, true);
    dw_Rotator.start();
    </script>

    实际使用时,只需要将上面红色的内容替换成你需要的内容即可。基本就是一个Image Library以及里面的picture
  • 相关阅读:
    进程管理
    磁盘管理
    用户组管理
    Idea 导入(import)项目和打开(open)项目的区别
    SqlServer--转换varchr值‘2993296307’时溢出了整数列 和 修改 字段类型
    C#--Winform--图标控件Chart详解
    SqlServer--存储过程--自定义存储过程
    SqlServer--存储过程--系统和扩展存储过程(不常用)
    SqlServer--视图
    C#--SqlServer--sql语句拼接和带参数的SQL语句
  • 原文地址:https://www.cnblogs.com/JustSoSo/p/1200069.html
Copyright © 2011-2022 走看看