Jquery 滑块名称

Question

我想知道滑块名称或任何此类滑块。这是滑块的链接http://sydney.edu.au/

Answer 1

“幻灯片”的通用名称。这是课程。它依赖于 MooTools

网址：http://sydney.edu.au/scripts/3.2.0/slideshow.js?v=20110627

/* USWT build r3.2.0 - slideshow.js - 2011-06-17 16:56:38 EST - !!! DO NOT MODIFY !!! */
var version = "v3.2.0 Distributable Release - 10/12/2010";
var SlideshowInstances = [];
var DocumentLoad = new Date();
$(window).addEvent("domload", function () {
    DocumentLoad = new Date()
});
var Slideshow = new Class({
    Implements: [Options, Events],
    options: {
        timer: 5,
        delay: 0,
        order: "random",
        startAtZero: false,
        loop: true,
        offset: [0, 0],
        loadStyle: null,
        displayErrors: false,
        quickStart: false,
        debug: false,
        animation: {
            method: Fx.Tween,
            properties: ["opacity", 0, 1],
            transition: "linear",
            duration: 2
        }
    },
    images: [],
    currentImage: null,
    nextImage: null,
    imagesRandomised: [],
    currentEl: null,
    previousEl: null,
    running: false,
    started: false,
    nextTimer: null,
    beginLoadTime: null,
    loadTime: 0,
    injected: false,
    error: false,
    load: function (b, a) {
        this.beginLoadTime = new Date();
        (new Request({
            url: b,
            onSuccess: function (k, f) {
                try {
                    var d = f.getElementsByTagName("gallery")[0];
                    if (!d) {
                        this.fireEvent("loadError", f, k);
                        this.__displayError("Failed to load slideshow (malformed configuration file [gallery]).");
                        return
                    }
                    var c = [];
                    var j = d.getElementsByTagName("image");
                    if (j.length == 0) {
                        this.fireEvent("loadError", f, k);
                        this.__displayError("Failed to load slideshow (malformed configuration file [images]).");
                        return
                    }
                    for (var h = 0; h < j.length; h++) {
                        c.push({
                            src: j[h].getAttribute("path"),
                            duration: j[h].getAttribute("time")
                        })
                    }
                    var e = {
                        timer: parseInt(d.getAttribute("timer")),
                        delay: parseInt(d.getAttribute("delay")),
                        order: d.getAttribute("order"),
                        startAtZero: (d.getAttribute("startAtZero") == "yes"),
                        fadeTime: parseInt(d.getAttribute("fadetime")),
                        loop: (d.getAttribute("looping") == "yes"),
                        offset: [parseInt(d.getAttribute("xpos")), parseInt(d.getAttribute("ypos"))]
                    };
                    if (isNaN(e.timer)) {
                        delete e.timer
                    }
                    if (isNaN(e.delay)) {
                        delete e.delay
                    }
                    if (isNaN(e.fadeTime)) {
                        delete e.fadeTime
                    }
                    if (isNaN(e.offset[0])) {
                        e.offset[0] = 0
                    }
                    if (isNaN(e.offset[1])) {
                        e.offset[1] = 0
                    }
                    if (!e.delay) {
                        e.delay = e.timer
                    }
                    if (typeof (e.fadeTime) != undefined) {
                        this.options.animation.duration = e.fadeTime;
                        delete e.fadeTime
                    }
                    this.setOptions(e);
                    this.setImages(c);
                    this.loadTime = new Date() - this.beginLoadTime;
                    if (a) {
                        this.start()
                    }
                    this.fireEvent("load")
                } catch (g) {
                    this.__displayError(g.name + ": " + g.message)
                }
            }.bind(this),
            onFailure: function () {
                this.fireEvent("loadError");
                this.__displayError("Failed to load slideshow (unable to load configuration).")
            }.bind(this)
        })).get()
    },
    initialize: function (d, b, a) {
        this.setOptions(b);
        this.setImages(a);
        var c = {
            "class": "slide",
            styles: {
                "background-position": this.options.offset[1] + "px " + this.options.offset[0] + "px",
                "background-repeat": "no-repeat"
            }
        };
        this.target = d;
        this.foreground = new Element("div", c);
        this.background = new Element("div", c);
        this.setAnimation(this.options.animation.method, this.options.animation.properties, this.options.animation.transition);
        if (this.options.images) {
            this.setImages(this.options.images);
            delete b.images
        }
        SlideshowInstances.push(this)
    },
    getDimensions: function () {
        return this.dimensions
    },
    setAnimation: function (d, a, c) {
        var b = new d(this.foreground, {
            transition: c ? c : "linear",
            duration: (this.options.animation.duration * 1000),
            onComplete: function () {
                if (!this.running) {
                    return
                }
                this.currentImage = this.nextImage;
                this.fireEvent("imageChanged", this.currentImage);
                var e = this.__selectNext();
                this.background.setStyle("background-image", "url(" + this.images[this.currentImage].src + ")");
                if (!e) {
                    this.stop.delay(this.images[this.currentImage].duration * 1000, this)
                } else {
                    this.nextTimer = this.next.delay(this.images[this.currentImage].duration * 1000, this)
                }
            }.bind(this)
        });
        this.__animationStart = b.start.pass(a, b);
        this.__animation = b
    },
    start: function () {
        if (this.error) {
            return
        }
        this.__inject();
        this.running = true;
        var a = $(this.target).getStyle("background-image");
        if (!this.started && this.currentImage == null && a) {
            var b = a.match(/^url\((?:'|")?(?:\.\/)?([^"']*)(?:'|")?\)$/i);
            if (b) {
                var c = b[1];
                this.images.each(function (e, f) {
                    if (c.endsWith(e.src.replace(/^\.\//, ""))) {
                        this.currentImage = f;
                        this.__selectNext();
                        return
                    }
                }.bind(this))
            }
        }
        if (this.currentImage == null) {
            this.__selectNext(-1)
        }
        if (this.nextTimer != null) {
            clearTimeout(this.nextTimer);
            this.nextTimer = null
        }
        if (this.currentImage == null || this.options.quickStart) {
            this.nextTimer = this.next.delay(50, this)
        } else {
            var d = Math.max((this.images[this.currentImage].duration * 1000) - (new Date() - DocumentLoad), 50);
            this.nextTimer = this.next.delay(d, this)
        }
    },
    stop: function () {
        if (!this.running) {
            return
        }
        this.running = false;
        this.fireEvent("stop")
    },
    reset: function () {
        this.currentImage = null;
        this.nextImage = null;
        this.imagesRandomised = null;
        this.started = false;
        this.foreground.setStyle("background-image", "none");
        this.background.setStyle("background-image", "none")
    },
    setImages: function (a) {
        if (this.running) {
            throw "Can't change images while the slideshow is running."
        }
        if (!a) {
            return
        }
        var b = this.options.timer;
        this.images = a.map(function (c) {
            if (typeOf(c) == "object") {
                return {
                    loaded: false,
                    loading: false,
                    valid: true,
                    src: c.src,
                    duration: (c.duration ? c.duration : b)
                }
            } else {
                return {
                    loaded: false,
                    loading: false,
                    valid: true,
                    src: c,
                    duration: b
                }
            }
        });
        this.imagesRandomised = null;
        this.currentImage = null;
        this.nextImage = null
    },
    preload: function () {
        if (this.error) {
            return
        }
        var a = 0;
        this.images.each(function (b, c) {
            this.__loadImage(c)
        }.bind(this))
    },
    next: function () {
        if (!this.running) {
            this.nextTimer = null;
            return
        }
        if (this.images.length == 0) {
            throw "Cannot run an empty slideshow."
        }
        if (!this.images[this.nextImage].loaded) {
            if (!this.images[this.nextImage].valid) {
                this.__selectNext()
            }
            this.nextTimer = this.next.delay(100, this);
            return
        }
        if (!this.started) {
            this.fireEvent("start");
            this.started = true
        }
        this.fireEvent("imageChanging", [this.currentImage, this.nextImage]);
        this.foreground.setStyle.delay((1000 / this.__animation.options.fps) + 10, this.foreground, ["background-image", "url(" + this.images[this.nextImage].src + ")"]);
        this.__animationStart()
    },
    __loadImage: function (a) {
        if (this.images[a].loading || this.images[a].loaded || !this.images[a].valid) {
            return
        }
        var b = new Image(1, 1);
        this.images[a].loading = true;
        b.onerror = function () {
            this.images[a].valid = false;
            this.images[a].loading = false;
            this.fireEvent("imageLoadError", a)
        }.bind(this);
        b.onload = function () {
            this.images[a].loaded = true;
            this.images[a].loading = false;
            var c = 0;
            this.images.each(function (d) {
                if (d.loaded) {
                    c++
                }
            });
            this.fireEvent("imageLoaded", a, c / this.images.length)
        }.bind(this);
        b.src = this.images[a].src
    },
    __selectNext: function (a) {
        if (a == null) {
            a = this.currentImage
        }
        if (this.options.order == "random") {
            if (!this.imagesRandomised || this.imagesRandomised.length == 0) {
                this.imagesRandomised = [];
                this.images.length.times(function (b) {
                    this.imagesRandomised[b] = b
                }, this);
                this.imagesRandomised.splice(this.currentImage, 1);
                this.imagesRandomised.shuffle()
            }
            this.nextImage = this.imagesRandomised.pop()
        } else {
            if (a + 1 < this.images.length) {
                this.nextImage = a + 1
            } else {
                if (this.options.loop) {
                    this.nextImage = 0
                } else {
                    return false
                }
            }
        }
        this.__loadImage(this.nextImage);
        if (!this.images[this.nextImage].valid) {
            if (!this.images.some(function (b) {
                return b.valid
            })) {
                this.__displayError("Failed to load images.");
                this.stop();
                return
            }
            return this.__selectNext(this.nextImage)
        }
        return true
    },
    __inject: function () {
        if (this.injected) {
            return
        }
        this.injected = true;
        this.dimensions = $(this.target).getCoordinates();
        var a = {
            width: this.dimensions.width,
            height: this.dimensions.height
        };
        this.background.setStyles(a);
        this.foreground.setStyles(a);
        $(this.target).adopt(this.background.adopt(this.foreground));
        if (typeOf(this.options.loadStyle) == "string") {
            $(this.target).addClass(this.options.loadStyle)
        } else {
            if (typeOf(this.options.loadStyle) == "object") {
                $(this.target).setStyles(this.options.loadStyle)
            }
        }
    },
    __displayError: function (a) {
        this.error = true;
        if (!this.options.displayErrors) {
            if (this.options.debug && typeOf(console) != "undefined" && console.log) {
                console.log(a)
            }
            return
        }
        this.running = false;
        if (this.nextTimer == null) {
            clearTimeout(this.nextTimer);
            this.nextTimer = null
        }
        if (typeOf(this.options.loadStyle) == "string") {
            $(this.target).removeClass(this.options.loadStyle)
        }
        $(this.target).empty().setStyle("color", "#f00").appendText(a)
    },
    __debug: function () {
        if (typeof console == "undefined") {
            return
        }
        console.log("Slideshow with ", this.images.length, " images");
        this.images.each(function (a) {
            console.log("Image: ", a.src, " " + (a.valid ? "valid" : "invalid"), " " + (a.loaded ? "loaded" : "not loaded"))
        });
        if (this.running) {
            console.log("The slideshow is running")
        }
        if (this.currentImage != null) {
            console.log("Currently showing image: ", this.images[this.currentImage].src)
        } else {
            console.log("Not showing an image")
        }
        if (this.nextImage != null) {
            console.log("Next image: ", this.images[this.nextImage].src)
        } else {
            console.log("No next image")
        }
        if (this.loadTime > 0) {
            console.log("Loaded XML settings in: ", this.loadTime, "ms")
        }
    }
});

function loadSlideshow(d, c, b) {
    var a = new Slideshow(d, b);
    a.load(c, true);
    return a
}
function slideshowDebug() {
    SlideshowInstances.each(function (a) {
        if (a) {
            a.__debug()
        }
    })
};

Answer 2

来自页面来源：

<script type="text/javascript" src="http://stats.usyd.edu.au/__utm.js"></script>
<script type="text/javascript" src="/scripts/3.2.0/mootools.js?v=20110627"></script>
<script type="text/javascript" src="/scripts/3.2.0/overlay.js?v=20110627"></script>
<script type="text/javascript" src="/scripts/3.2.0/slideshow.js?v=20110627"></script>
<script type="text/javascript" src="/scripts/3.2.0/common.js?v=20110627"></script>

Answer 3

Google jQuery 幻灯片插件。那里有很多不同的，所以您应该能够找到满足您需求的一种。

以这个列表为例：

http://slodive.com/freebies/best-jquery-slideshow-gallery-plugins/

Answer 4

这不过是image menu script.. 预览：http://hscripts.com/scripts/JavaScript/imagemenu.php