如何用jquery制作具有不同尺寸图像的幻灯片

发布于 2024-11-01 12:25:46 字数 71 浏览 4 评论 0原文

我想使用 jquery 创建幻灯片。但我有不同尺寸的图像。请建议我如何创建根据图像改变其尺寸的幻灯片?

提前致谢

I want to create a slideshow using jquery. But i have different size of images. Please suggest me how do i create slideshow which changes its dimension depending on the images?

Thanks in advance

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

回梦 2024-11-08 12:25:46

我发现 colorbox 插件在这方面做得很好。

http://colorpowered.com/colorbox/

I find that the colorbox plugin does a good job of this.

http://colorpowered.com/colorbox/

究竟谁懂我的在乎 2024-11-08 12:25:46

给出了许多示例

http://www.dynamicwp.net/articles-and-tutorials/top-20-jquery-slideshow-and-image-gallery-tutorials/

请检查这些示例。选择最适合您要求的。
如果我们知道您正在使用的插件,那么提供帮助会更容易。您已经选择了吗?

There are many examples given at

http://www.dynamicwp.net/articles-and-tutorials/top-20-jquery-slideshow-and-image-gallery-tutorials/

Please check these examples. Pick the best suited for your requirement.
If we know the plugin you are using it would be easier to help. Have you already selected any?

淡紫姑娘! 2024-11-08 12:25:46

您想要的代码如下:
将以下代码添加到html文件中

<script type="text/javascript">
var rotator1 = {
    path:   'Images/',
    id:   'imgsite',
    speed:  3000, // default 4500
    images: ["image1_big.jpg", "image2_medium.jpg", "image3_small.jpg"],
    bTrans: true // ie win filter
}

function initRotator() {
    mts_Rotator.setup(rotator1);
}

mts_Event.add( window, 'load', initRotator);
</script>

所需的脚本如下

    var mts_Event = {

    add: function(obj, etype, fp, cap) {
        cap = cap || false;
        if (obj.addEventListener) obj.addEventListener(etype, fp, cap);
        else if (obj.attachEvent) obj.attachEvent("on" + etype, fp);
    }, 

    remove: function(obj, etype, fp, cap) {
        cap = cap || false;
        if (obj.removeEventListener) obj.removeEventListener(etype, fp, cap);
        else if (obj.detachEvent) obj.detachEvent("on" + etype, fp);
    }, 

    DOMit: function(e) { 
        e = e? e: window.event; // e IS passed when using attachEvent though ...
        if (!e.target) e.target = e.srcElement;
        if (!e.preventDefault) e.preventDefault = function () { e.returnValue = false; return false; }
        if (!e.stopPropagation) e.stopPropagation = function () { e.cancelBubble = true; }
        return e;
    },

    getTarget: function(e) {
        e = mts_Event.DOMit(e); var tgt = e.target; 
        if (tgt.nodeType != 1) tgt = tgt.parentNode; // safari...
        return tgt;
    }

}

function addLoadEvent(func) {
    var oldQueue = window.onload? window.onload: function() {};
    window.onload = function() {
        oldQueue();
        func();
    }
}

/*************************************************************************
*************************************************************************/

// arguments: image id, rotation speed, path to images (optional), 
// new (optional) arguments: for transitions, mouse events and random rotation 
function mts_Rotator(id, speed, path, bTrans, bMouse, bRand) {
    var imgObj = document.getElementById(id); 
    if (!imgObj) { // in case name, not id attached to image
        imgObj = document.images[id];
        if (!imgObj) return;
        imgObj.id = id;
    }
    this.id = id; this.speed = speed || 4500; // default speed of rotation
    this.path = path || "";  this.bRand = bRand;
    this.ctr = 0; this.timer = 0; this.imgs = []; 
    this._setupLink(imgObj, bMouse);
    this.bTrans = bTrans && typeof imgObj.filters != 'undefined';
    var index = mts_Rotator.col.length; mts_Rotator.col[index] = this;
    this.animString = "mts_Rotator.col[" + index + "]";
}

mts_Rotator.col = []; // hold instances
mts_Rotator.resumeDelay = 400; // onmouseout resume rotation after delay

// mouse events pause/resume
mts_Rotator.prototype._setupLink = function(imgObj, bMouse) { 
    if ( imgObj.parentNode && imgObj.parentNode.tagName.toLowerCase() == 'a' ) {
        var parentLink = this.parentLink = imgObj.parentNode;
        if (bMouse) {
            mts_Event.add(parentLink, 'mouseover', mts_Rotator.pause);
            mts_Event.add(parentLink, 'mouseout', mts_Rotator.resume);
        }
    }
}

// so instance can be retrieved by id (as well as by looping through col)
mts_Rotator.getInstanceById = function(id) {
    var len = mts_Rotator.col.length, obj;
    for (var i=0; i<len; i++) {
        obj = mts_Rotator.col[i];
        if (obj.id && obj.id == id ) {
            return obj;
        }
    }
    return null;
}

mts_Rotator.prototype.on_rotate = function() {}

mts_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;
    }
}

mts_Rotator.prototype.rotate = function() {
    clearTimeout(this.timer); this.timer = null;
    var imgObj = document.getElementById(this.id);
    if ( this.bRand ) {
        this.setRandomCtr();
    } else {
        if (this.ctr < this.imgs.length-1) this.ctr++;
        else this.ctr = 0;
    }
    if ( this.bTrans ) {
        this.doImageTrans(imgObj);
    } else {
        imgObj.src = this.imgs[this.ctr].src;
    }
    this.swapAlt(imgObj); this.prepAction(); this.on_rotate();
    this.timer = setTimeout( this.animString + ".rotate()", this.speed);   
}

mts_Rotator.prototype.setRandomCtr = function() {
    var i = 0, ctr;
    do { 
        ctr = Math.floor( Math.random() * this.imgs.length );
        i++; 
    } while ( ctr == this.ctr && i < 6 )// repeat attempts to get new image, if necessary
    this.ctr = ctr;
}

mts_Rotator.prototype.doImageTrans = function(imgObj) {
    imgObj.style.filter = 'blendTrans(duration=1)';
    if (imgObj.filters.blendTrans) imgObj.filters.blendTrans.Apply();
    imgObj.src = this.imgs[this.ctr].src;
    imgObj.filters.blendTrans.Play(); 
}

mts_Rotator.prototype.swapAlt = function(imgObj) {
    if ( !imgObj.setAttribute ) return;
    if ( this.alt && this.alt[this.ctr] ) {
        imgObj.setAttribute('alt', this.alt[this.ctr]);
    }
    if ( this.title && this.title[this.ctr] ) {
        imgObj.setAttribute('title', this.title[this.ctr]);
    }
}

mts_Rotator.prototype.prepAction = function() {
    if ( this.actions && this.parentLink && this.actions[this.ctr] ) {
        if ( typeof this.actions[this.ctr] == 'string' ) {
            this.parentLink.href = this.actions[this.ctr];
        } else if ( typeof this.actions[this.ctr] == 'function' ) {
            // to execute function when linked image clicked 
            // passes id used to uniquely identify instance  
            // retrieve it using the mts_Rotator.getInstanceById function 
            // so any property of the instance could be obtained for use in the function 
            var id = this.id;
            this.parentLink.href = "javascript: void " + this.actions[this.ctr] + "('" + id + "')";
        } 
    }
}

mts_Rotator.prototype.showCaption = function() {
    if ( this.captions && this.captionId ) {
        var el = document.getElementById( this.captionId );
        if ( el && this.captions[this.ctr] ) {
            el.innerHTML = this.captions[this.ctr];
        }
    }
}

// Start rotation for all instances 
mts_Rotator.start = function() {
    var len = mts_Rotator.col.length, obj;
    for (var i=0; i<len; i++) {
        obj = mts_Rotator.col[i];
        if (obj && obj.id ) {
            clearTimeout( obj.timer ); obj.timer = null; 
            obj.timer = setTimeout( obj.animString + ".rotate()", obj.speed);
        }
    }
}

// Stop rotation for all instances 
mts_Rotator.stop = function() {
    var len = mts_Rotator.col.length, obj;
    for (var i=0; i<len; i++) {
        obj = mts_Rotator.col[i];
        if (obj ) { clearTimeout(obj.timer); obj.timer = null; }
    }
}

// for stopping/starting (onmouseover/out)
mts_Rotator.pause = function(e) {   
    e = mts_Event.DOMit(e);
    var id = e.target.id;
    var obj = mts_Rotator.getInstanceById(id);
    if ( obj ) { clearTimeout( obj.timer ); obj.timer = null; }
}

mts_Rotator.resume = function(e) {
    e = mts_Event.DOMit(e);
    var id = e.target.id;
    var obj = mts_Rotator.getInstanceById(id);
    if ( obj && obj.id ) {
        obj.timer = setTimeout( obj.animString + ".rotate()", mts_Rotator.resumeDelay );
    }
}

// calls constructor, addImages, adds actions, etc.
mts_Rotator.setup = function () {
    if (!document.getElementById) return;
    var i, j, rObj, r, imgAr, len;
    for (i=0; arguments[i]; i++) {
        rObj = arguments[i];
        r = new mts_Rotator(rObj.id, rObj.speed, rObj.path, rObj.bTrans, rObj.bMouse, rObj.bRand);
        try {
            imgAr = rObj.images; len = imgAr.length;
            for (j=0; j<len; j++) { r.addImages( imgAr[j] ); }
            if( rObj.num ) r.ctr = rObj.num; // for seq after random selection
            if ( rObj.actions && rObj.actions.length == len ) {
                r.addProp('actions', rObj.actions);
            }
            if ( rObj.alt && rObj.alt.length == len ) {
                r.addProp('alt', rObj.alt);
            }
            if ( rObj.title && rObj.title.length == len ) {
                r.addProp('title', rObj.title);
            }
            if ( rObj.captions ) {
                r.addProp('captions', rObj.captions);
                r.captionId = rObj.captionId;
                mts_Rotator.addRotateEvent(r, function (id) { 
                    return function() { mts_Rotator.getInstanceById(id).showCaption(); }
                }(rObj.id) ); // see Crockford js good parts pg 39
            }
        } catch (e) { 
            //alert(e.message); 
        }
    }
    mts_Rotator.start();
}

// add to on_rotate for specified instance (r)
// see usage above for captions
mts_Rotator.addRotateEvent = function( r, fp ) {
    var old_on_rotate = r.on_rotate;
    r.on_rotate = function() { old_on_rotate(); fp(); }
}

// for adding actions, alt, title
mts_Rotator.prototype.addProp = function(prop, ar) {
    if ( !this[prop] ) {
        this[prop] = [];
    }
    var len = ar.length; 
    for (var i=0; i < len; i++) {
        this[prop][ this[prop].length ] = ar[i]; 
    }
}

/////////////////////////////////////////////////////////////////////
// Reminder about licensing requirements
// OK to remove after purchasing a license or if using on a personal site.
function mts_checkAuth() {
}
mts_Event.add( window, 'load', mts_checkAuth);
/////////////////////////////////////////////////////////////////////

The code you wanted is as follows:
Add following code to html file

<script type="text/javascript">
var rotator1 = {
    path:   'Images/',
    id:   'imgsite',
    speed:  3000, // default 4500
    images: ["image1_big.jpg", "image2_medium.jpg", "image3_small.jpg"],
    bTrans: true // ie win filter
}

function initRotator() {
    mts_Rotator.setup(rotator1);
}

mts_Event.add( window, 'load', initRotator);
</script>

The scripts needed are as below

    var mts_Event = {

    add: function(obj, etype, fp, cap) {
        cap = cap || false;
        if (obj.addEventListener) obj.addEventListener(etype, fp, cap);
        else if (obj.attachEvent) obj.attachEvent("on" + etype, fp);
    }, 

    remove: function(obj, etype, fp, cap) {
        cap = cap || false;
        if (obj.removeEventListener) obj.removeEventListener(etype, fp, cap);
        else if (obj.detachEvent) obj.detachEvent("on" + etype, fp);
    }, 

    DOMit: function(e) { 
        e = e? e: window.event; // e IS passed when using attachEvent though ...
        if (!e.target) e.target = e.srcElement;
        if (!e.preventDefault) e.preventDefault = function () { e.returnValue = false; return false; }
        if (!e.stopPropagation) e.stopPropagation = function () { e.cancelBubble = true; }
        return e;
    },

    getTarget: function(e) {
        e = mts_Event.DOMit(e); var tgt = e.target; 
        if (tgt.nodeType != 1) tgt = tgt.parentNode; // safari...
        return tgt;
    }

}

function addLoadEvent(func) {
    var oldQueue = window.onload? window.onload: function() {};
    window.onload = function() {
        oldQueue();
        func();
    }
}

/*************************************************************************
*************************************************************************/

// arguments: image id, rotation speed, path to images (optional), 
// new (optional) arguments: for transitions, mouse events and random rotation 
function mts_Rotator(id, speed, path, bTrans, bMouse, bRand) {
    var imgObj = document.getElementById(id); 
    if (!imgObj) { // in case name, not id attached to image
        imgObj = document.images[id];
        if (!imgObj) return;
        imgObj.id = id;
    }
    this.id = id; this.speed = speed || 4500; // default speed of rotation
    this.path = path || "";  this.bRand = bRand;
    this.ctr = 0; this.timer = 0; this.imgs = []; 
    this._setupLink(imgObj, bMouse);
    this.bTrans = bTrans && typeof imgObj.filters != 'undefined';
    var index = mts_Rotator.col.length; mts_Rotator.col[index] = this;
    this.animString = "mts_Rotator.col[" + index + "]";
}

mts_Rotator.col = []; // hold instances
mts_Rotator.resumeDelay = 400; // onmouseout resume rotation after delay

// mouse events pause/resume
mts_Rotator.prototype._setupLink = function(imgObj, bMouse) { 
    if ( imgObj.parentNode && imgObj.parentNode.tagName.toLowerCase() == 'a' ) {
        var parentLink = this.parentLink = imgObj.parentNode;
        if (bMouse) {
            mts_Event.add(parentLink, 'mouseover', mts_Rotator.pause);
            mts_Event.add(parentLink, 'mouseout', mts_Rotator.resume);
        }
    }
}

// so instance can be retrieved by id (as well as by looping through col)
mts_Rotator.getInstanceById = function(id) {
    var len = mts_Rotator.col.length, obj;
    for (var i=0; i<len; i++) {
        obj = mts_Rotator.col[i];
        if (obj.id && obj.id == id ) {
            return obj;
        }
    }
    return null;
}

mts_Rotator.prototype.on_rotate = function() {}

mts_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;
    }
}

mts_Rotator.prototype.rotate = function() {
    clearTimeout(this.timer); this.timer = null;
    var imgObj = document.getElementById(this.id);
    if ( this.bRand ) {
        this.setRandomCtr();
    } else {
        if (this.ctr < this.imgs.length-1) this.ctr++;
        else this.ctr = 0;
    }
    if ( this.bTrans ) {
        this.doImageTrans(imgObj);
    } else {
        imgObj.src = this.imgs[this.ctr].src;
    }
    this.swapAlt(imgObj); this.prepAction(); this.on_rotate();
    this.timer = setTimeout( this.animString + ".rotate()", this.speed);   
}

mts_Rotator.prototype.setRandomCtr = function() {
    var i = 0, ctr;
    do { 
        ctr = Math.floor( Math.random() * this.imgs.length );
        i++; 
    } while ( ctr == this.ctr && i < 6 )// repeat attempts to get new image, if necessary
    this.ctr = ctr;
}

mts_Rotator.prototype.doImageTrans = function(imgObj) {
    imgObj.style.filter = 'blendTrans(duration=1)';
    if (imgObj.filters.blendTrans) imgObj.filters.blendTrans.Apply();
    imgObj.src = this.imgs[this.ctr].src;
    imgObj.filters.blendTrans.Play(); 
}

mts_Rotator.prototype.swapAlt = function(imgObj) {
    if ( !imgObj.setAttribute ) return;
    if ( this.alt && this.alt[this.ctr] ) {
        imgObj.setAttribute('alt', this.alt[this.ctr]);
    }
    if ( this.title && this.title[this.ctr] ) {
        imgObj.setAttribute('title', this.title[this.ctr]);
    }
}

mts_Rotator.prototype.prepAction = function() {
    if ( this.actions && this.parentLink && this.actions[this.ctr] ) {
        if ( typeof this.actions[this.ctr] == 'string' ) {
            this.parentLink.href = this.actions[this.ctr];
        } else if ( typeof this.actions[this.ctr] == 'function' ) {
            // to execute function when linked image clicked 
            // passes id used to uniquely identify instance  
            // retrieve it using the mts_Rotator.getInstanceById function 
            // so any property of the instance could be obtained for use in the function 
            var id = this.id;
            this.parentLink.href = "javascript: void " + this.actions[this.ctr] + "('" + id + "')";
        } 
    }
}

mts_Rotator.prototype.showCaption = function() {
    if ( this.captions && this.captionId ) {
        var el = document.getElementById( this.captionId );
        if ( el && this.captions[this.ctr] ) {
            el.innerHTML = this.captions[this.ctr];
        }
    }
}

// Start rotation for all instances 
mts_Rotator.start = function() {
    var len = mts_Rotator.col.length, obj;
    for (var i=0; i<len; i++) {
        obj = mts_Rotator.col[i];
        if (obj && obj.id ) {
            clearTimeout( obj.timer ); obj.timer = null; 
            obj.timer = setTimeout( obj.animString + ".rotate()", obj.speed);
        }
    }
}

// Stop rotation for all instances 
mts_Rotator.stop = function() {
    var len = mts_Rotator.col.length, obj;
    for (var i=0; i<len; i++) {
        obj = mts_Rotator.col[i];
        if (obj ) { clearTimeout(obj.timer); obj.timer = null; }
    }
}

// for stopping/starting (onmouseover/out)
mts_Rotator.pause = function(e) {   
    e = mts_Event.DOMit(e);
    var id = e.target.id;
    var obj = mts_Rotator.getInstanceById(id);
    if ( obj ) { clearTimeout( obj.timer ); obj.timer = null; }
}

mts_Rotator.resume = function(e) {
    e = mts_Event.DOMit(e);
    var id = e.target.id;
    var obj = mts_Rotator.getInstanceById(id);
    if ( obj && obj.id ) {
        obj.timer = setTimeout( obj.animString + ".rotate()", mts_Rotator.resumeDelay );
    }
}

// calls constructor, addImages, adds actions, etc.
mts_Rotator.setup = function () {
    if (!document.getElementById) return;
    var i, j, rObj, r, imgAr, len;
    for (i=0; arguments[i]; i++) {
        rObj = arguments[i];
        r = new mts_Rotator(rObj.id, rObj.speed, rObj.path, rObj.bTrans, rObj.bMouse, rObj.bRand);
        try {
            imgAr = rObj.images; len = imgAr.length;
            for (j=0; j<len; j++) { r.addImages( imgAr[j] ); }
            if( rObj.num ) r.ctr = rObj.num; // for seq after random selection
            if ( rObj.actions && rObj.actions.length == len ) {
                r.addProp('actions', rObj.actions);
            }
            if ( rObj.alt && rObj.alt.length == len ) {
                r.addProp('alt', rObj.alt);
            }
            if ( rObj.title && rObj.title.length == len ) {
                r.addProp('title', rObj.title);
            }
            if ( rObj.captions ) {
                r.addProp('captions', rObj.captions);
                r.captionId = rObj.captionId;
                mts_Rotator.addRotateEvent(r, function (id) { 
                    return function() { mts_Rotator.getInstanceById(id).showCaption(); }
                }(rObj.id) ); // see Crockford js good parts pg 39
            }
        } catch (e) { 
            //alert(e.message); 
        }
    }
    mts_Rotator.start();
}

// add to on_rotate for specified instance (r)
// see usage above for captions
mts_Rotator.addRotateEvent = function( r, fp ) {
    var old_on_rotate = r.on_rotate;
    r.on_rotate = function() { old_on_rotate(); fp(); }
}

// for adding actions, alt, title
mts_Rotator.prototype.addProp = function(prop, ar) {
    if ( !this[prop] ) {
        this[prop] = [];
    }
    var len = ar.length; 
    for (var i=0; i < len; i++) {
        this[prop][ this[prop].length ] = ar[i]; 
    }
}

/////////////////////////////////////////////////////////////////////
// Reminder about licensing requirements
// OK to remove after purchasing a license or if using on a personal site.
function mts_checkAuth() {
}
mts_Event.add( window, 'load', mts_checkAuth);
/////////////////////////////////////////////////////////////////////
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文