如何获取图像高度并将其添加到包含的Javascript中

下面是一个滑块，最后一行列出了一些默认值。其中之一是身高。这将指定滑块的高度。但我试图让它随着图像的高度而变化。滑块的每个实例都有相同高度的图像，但另一个页面的滑块中可能有不同高度的图像

this.each(function() { init(this); });
$.fn.coinslider.defaults = { 
    width:828,
    height:564,
    spw:7,
    sph:5,
    delay:3000,
    sDelay:30,
    opacity:0.7,
    titleSpeed:500,
    effect:'',
    navigation:true,
    links:false,
    hoverPause:true };
})(jQuery);

我找到了几种方法来确定图像高度，但我不确定如何将它们正确地安装到下面的代码中

我的工作对象是：

var img = document.getElementByClass('imageclass');
img.clientHeight; 

如何将其注入到下面的代码中，并替换最后一行中指定高度的静态图形？还是我完全走错了方向

(function ($) {
var params = new Array;
var order = new Array;
var images = new Array;
var links = new Array;
var linksTarget = new Array;
var titles = new Array;
var interval = new Array;
var imagePos = new Array;
var appInterval = new Array;
var squarePos = new Array;
var reverse = new Array;
$.fn.coinslider = $.fn.CoinSlider = function (options) {
    init = function (el) {
        order[el.id] = new Array();
        images[el.id] = new Array();
        links[el.id] = new Array();
        linksTarget[el.id] = new Array();
        titles[el.id] = new Array();
        imagePos[el.id] = 0;
        squarePos[el.id] = 0;
        reverse[el.id] = 1;
        params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
        $.each($('#' + el.id + ' img'), function (i, item) {
            images[el.id][i] = $(item).attr('src');
            links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
            linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
            titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : '';
            $(item).hide();
            $(item).next().hide();
        });
        $(el).css({
            'background-image': 'url(' + images[el.id][0] + ')',
            'width': params[el.id].width,
            'height': params[el.id].height,
            'position': 'relative',
            'background-position': 'top left'
        }).wrap("<div class='coin-slider' id='coin-slider-" + el.id + "' />");
        $('#' + el.id).append("<div class='cs-title' id='cs-title-" + el.id + "' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
        $.setFields(el);
        if (params[el.id].navigation) $.setNavigation(el);
        $.transition(el, 0);
        $.transitionCall(el);
    }
    $.setFields = function (el) {
        tWidth = sWidth = parseInt(params[el.id].width / params[el.id].spw);
        tHeight = sHeight = parseInt(params[el.id].height / params[el.id].sph);
        counter = sLeft = sTop = 0;
        tgapx = gapx = params[el.id].width - params[el.id].spw * sWidth;
        tgapy = gapy = params[el.id].height - params[el.id].sph * sHeight;
        for (i = 1; i <= params[el.id].sph; i++) {
            gapx = tgapx;
            if (gapy > 0) {
                gapy--;
                sHeight = tHeight + 1;
            } else {
                sHeight = tHeight;
            }
            for (j = 1; j <= params[el.id].spw; j++) {
                if (gapx > 0) {
                    gapx--;
                    sWidth = tWidth + 1;
                } else {
                    sWidth = tWidth;
                }
                order[el.id][counter] = i + '' + j;
                counter++;
                if (params[el.id].links) $('#' + el.id).append("<a href='" + links[el.id][0] + "' class='cs-" + el.id + "' id='cs-" + el.id + i + j + "' style='width:" + sWidth + "px; height:" + sHeight + "px; float: left; position: absolute;'></a>");
                else $('#' + el.id).append("<div class='cs-" + el.id + "' id='cs-" + el.id + i + j + "' style='width:" + sWidth + "px; height:" + sHeight + "px; float: left; position: absolute;'></div>");
                $("#cs-" + el.id + i + j).css({
                    'background-position': -sLeft + 'px ' + (-sTop + 'px'),
                    'left': sLeft,
                    'top': sTop
                });
                sLeft += sWidth;
            }
            sTop += sHeight;
            sLeft = 0;
        }
        $('.cs-' + el.id).mouseover(function () {
            $('#cs-navigation-' + el.id).show();
        });
        $('.cs-' + el.id).mouseout(function () {
            $('#cs-navigation-' + el.id).hide();
        });
        $('#cs-title-' + el.id).mouseover(function () {
            $('#cs-navigation-' + el.id).show();
        });
        $('#cs-title-' + el.id).mouseout(function () {
            $('#cs-navigation-' + el.id).hide();
        });
        if (params[el.id].hoverPause) {
            $('.cs-' + el.id).mouseover(function () {
                params[el.id].pause = true;
            });
            $('.cs-' + el.id).mouseout(function () {
                params[el.id].pause = false;
            });
            $('#cs-title-' + el.id).mouseover(function () {
                params[el.id].pause = true;
            });
            $('#cs-title-' + el.id).mouseout(function () {
                params[el.id].pause = false;
            });
        }
    };
    $.transitionCall = function (el) {
        clearInterval(interval[el.id]);
        delay = params[el.id].delay + params[el.id].spw * params[el.id].sph * params[el.id].sDelay;
        interval[el.id] = setInterval(function () {
            $.transition(el)
        }, delay);
    }
    $.transition = function (el, direction) {
        if (params[el.id].pause == true) return;
        $.effect(el);
        squarePos[el.id] = 0;
        appInterval[el.id] = setInterval(function () {
            $.appereance(el, order[el.id][squarePos[el.id]])
        }, params[el.id].sDelay);
        $(el).css({
            'background-image': 'url(' + images[el.id][imagePos[el.id]] + ')'
        });
        if (typeof (direction) == "undefined") imagePos[el.id]++;
        else if (direction == 'prev') imagePos[el.id]--;
        else imagePos[el.id] = direction;
        if (imagePos[el.id] == images[el.id].length) {
            imagePos[el.id] = 0;
        }
        if (imagePos[el.id] == -1) {
            imagePos[el.id] = images[el.id].length - 1;
        }
        $('.cs-button-' + el.id).removeClass('cs-active');
        $('#cs-button-' + el.id + "-" + (imagePos[el.id] + 1)).addClass('cs-active');
        if (titles[el.id][imagePos[el.id]]) {
            $('#cs-title-' + el.id).css({
                'opacity': 0
            }).animate({
                'opacity': params[el.id].opacity
            }, params[el.id].titleSpeed);
            $('#cs-title-' + el.id).html(titles[el.id][imagePos[el.id]]);
        } else {
            $('#cs-title-' + el.id).css('opacity', 0);
        }
    };
    $.appereance = function (el, sid) {
        $('.cs-' + el.id).attr('href', links[el.id][imagePos[el.id]]).attr('target', linksTarget[el.id][imagePos[el.id]]);
        if (squarePos[el.id] == params[el.id].spw * params[el.id].sph) {
            clearInterval(appInterval[el.id]);
            return;
        }
        $('#cs-' + el.id + sid).css({
            opacity: 0,
            'background-image': 'url(' + images[el.id][imagePos[el.id]] + ')'
        });
        $('#cs-' + el.id + sid).animate({
            opacity: 1
        }, 300);
        squarePos[el.id]++;
    };
    $.setNavigation = function (el) {
        $(el).append("<div id='cs-navigation-" + el.id + "'></div>");
        $('#cs-navigation-' + el.id).hide();
        $('#cs-navigation-' + el.id).append("<a href='#' id='cs-prev-" + el.id + "' class='cs-prev'></a>");
        $('#cs-navigation-' + el.id).append("<a href='#' id='cs-next-" + el.id + "' class='cs-next'></a>");
        $('#cs-prev-' + el.id).css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'z-index': 1001,
            'line-height': '30px',
            'opacity': params[el.id].opacity
        }).click(function (e) {
            e.preventDefault();
            $.transition(el, 'prev');
            $.transitionCall(el);
        }).mouseover(function () {
            $('#cs-navigation-' + el.id).show()
        });
        $('#cs-next-' + el.id).css({
            'position': 'absolute',
            'top': 0,
            'right': 0,
            'z-index': 1001,
            'line-height': '30px',
            'opacity': params[el.id].opacity
        }).click(function (e) {
            e.preventDefault();
            $.transition(el);
            $.transitionCall(el);
        }).mouseover(function () {
            $('#cs-navigation-' + el.id).show()
        });
        $("<div id='cs-buttons-" + el.id + "' class='cs-buttons'></div>").appendTo($('#coin-slider-' + el.id));
        for (k = 1; k < images[el.id].length + 1; k++) {
            $('#cs-buttons-' + el.id).append("<a href='#' class='cs-button-" + el.id + "' id='cs-button-" + el.id + "-" + k + "'>" + k + "</a>");
        }
        $.each($('.cs-button-' + el.id), function (i, item) {
            $(item).click(function (e) {
                $('.cs-button-' + el.id).removeClass('cs-active');
                $(this).addClass('cs-active');
                e.preventDefault();
                $.transition(el, i);
                $.transitionCall(el);
            })
        });
        $('#cs-navigation-' + el.id + ' a').mouseout(function () {
            $('#cs-navigation-' + el.id).hide();
            params[el.id].pause = false;
        });
        $("#cs-buttons-" + el.id) /*.css({'right':'50%','margin-left':-images[el.id].length*15/2-5,'position':'relative'})*/
        ;
    }
    $.effect = function (el) {
        effA = ['random', 'swirl', 'rain', 'straight'];
        if (params[el.id].effect == '') eff = effA[Math.floor(Math.random() * (effA.length))];
        else eff = params[el.id].effect;
        order[el.id] = new Array();
        if (eff == 'random') {
            counter = 0;
            for (i = 1; i <= params[el.id].sph; i++) {
                for (j = 1; j <= params[el.id].spw; j++) {
                    order[el.id][counter] = i + '' + j;
                    counter++;
                }
            }
            $.random(order[el.id]);
        }
        if (eff == 'rain') {
            $.rain(el);
        }
        if (eff == 'swirl') $.swirl(el);
        if (eff == 'straight') $.straight(el);
        reverse[el.id] *= -1;
        if (reverse[el.id] > 0) {
            order[el.id].reverse();
        }
    }
    $.random = function (arr) {
        var i = arr.length;
        if (i == 0) return false;
        while (--i) {
            var j = Math.floor(Math.random() * (i + 1));
            var tempi = arr[i];
            var tempj = arr[j];
            arr[i] = tempj;
            arr[j] = tempi;
        }
    }
    $.swirl = function (el) {
        var n = params[el.id].sph;
        var m = params[el.id].spw;
        var x = 1;
        var y = 1;
        var going = 0;
        var num = 0;
        var c = 0;
        var dowhile = true;
        while (dowhile) {
            num = (going == 0 || going == 2) ? m : n;
            for (i = 1; i <= num; i++) {
                order[el.id][c] = x + '' + y;
                c++;
                if (i != num) {
                    switch (going) {
                    case 0:
                        y++;
                        break;
                    case 1:
                        x++;
                        break;
                    case 2:
                        y--;
                        break;
                    case 3:
                        x--;
                        break;
                    }
                }
            }
            going = (going + 1) % 4;
            switch (going) {
            case 0:
                m--;
                y++;
                break;
            case 1:
                n--;
                x++;
                break;
            case 2:
                m--;
                y--;
                break;
            case 3:
                n--;
                x--;
                break;
            }
            check = $.max(n, m) - $.min(n, m);
            if (m <= check && n <= check) dowhile = false;
        }
    }
    $.rain = function (el) {
        var n = params[el.id].sph;
        var m = params[el.id].spw;
        var c = 0;
        var to = to2 = from = 1;
        var dowhile = true;
        while (dowhile) {
            for (i = from; i <= to; i++) {
                order[el.id][c] = i + '' + parseInt(to2 - i + 1);
                c++;
            }
            to2++;
            if (to < n && to2 < m && n < m) {
                to++;
            }
            if (to < n && n >= m) {
                to++;
            }
            if (to2 > m) {
                from++;
            }
            if (from > to) dowhile = false;
        }
    }
    $.straight = function (el) {
        counter = 0;
        for (i = 1; i <= params[el.id].sph; i++) {
            for (j = 1; j <= params[el.id].spw; j++) {
                order[el.id][counter] = i + '' + j;
                counter++;
            }
        }
    }
    $.min = function (n, m) {
        if (n > m) return m;
        else return n;
    }
    $.max = function (n, m) {
        if (n < m) return m;
        else return n;
    }
    this.each(function () {
        init(this);
    });
};
$.fn.coinslider.defaults = {
    width: 828,
    height: 564,
    spw: 7,
    sph: 5,
    delay: 3000,
    sDelay: 30,
    opacity: 0.7,
    titleSpeed: 500,
    effect: '',
    navigation: true,
    links: false,
    hoverPause: true
};
})(jQuery);

（函数（$）{
var params=新数组；
var顺序=新数组；
var图像=新数组；
var-links=新数组；
var linksTarget=新数组；
var titles=新数组；
var区间=新数组；
var-imagePos=新阵列；
var-appInterval=新数组；
var squarePos=新数组；
var reverse=新数组；
$.fn.coinslider=$.fn.coinslider=函数（选项）{
init=函数（el）{
顺序[el.id]=新数组（）；
images[el.id]=新数组（）；
links[el.id]=新数组（）；
linksTarget[el.id]=新数组（）；
titles[el.id]=新数组（）；
imagePos[el.id]=0；
squarePos[el.id]=0；
反向[el.id]=1；
params[el.id]=$.extend（{}，$.fn.coinsslider.defaults，options）；
$。每个（$（'#'+el.id+'img'），函数（i，项）{
图像[el.id][i]=$（item.attr（'src'）；
links[el.id][i]=$（item.parent（）.is（'a'）？$（item.parent（）.attr（'href'）：''；
linksTarget[el.id][i]=$（item）.parent（）.is（'a'）？$（item.parent（）.attr（'target'）：''；
titles[el.id][i]=$（项目）.next（）.is（'span'）？$（项目）.next（）.html（）：''；
$（item.hide（）；
$（项）.next（）.hide（）；
});
$（el）.css({
“背景图像”：“url（'+images[el.id][0]+'），
“宽度”：参数[el.id]。宽度，
“高度”：参数[el.id]。高度，
'位置'：'相对'，
“背景位置”：“左上角”
}).wrap（“”）；
$（'#'+el.id）；
$设置字段（el）；
if（params[el.id].navigation）$.setNavigation（el）；
$转换（el，0）；
$.transitionCall（el）；
}
$.setFields=函数（el）{
tWidth=sWidth=parseInt（params[el.id].width/params[el.id].spw）；
tHeight=sHeight=parseInt（params[el.id].height/params[el.id].sph）；
计数器=sLeft=sTop=0；
tgapx=gapx=params[el.id].width-params[el.id].spw*sWidth；
tgapy=gapy=params[el.id]。高度-params[el.id]。sph*sHeight；
对于（i=1；i 0）{
裂开--；
sHeight=tHeight+1；
}否则{
sHeight=tHeight；
}
对于（j=1；j 0）{
gapx--；
sWidth=tWidth+1；
}否则{
sWidth=tWidth；
}
订单[el.id][counter]=i+''+j；
计数器++；
if（params[el.id].links）$（“#”+el.id）.append（“”）；
else$（'#'+el.id）.append（“”）；
$（“#cs-”+el.id+i+j）.css({
“背景位置”：-sLeft+'px'+（-sTop+'px'），
“左”：斯莱夫特，
“顶部”：停止
});
sLeft+=sWidth；
}
停止+=停止；
sLeft=0；
}
$（'.cs-'+el.id）.mouseover（函数（）{
$（'#cs导航-'+el.id）.show（）；
});
$（'.cs-'+el.id）.mouseout（函数（）{
$（'#cs导航-'+el.id）.hide（）；
});
$（'#cs title-'+el.id）.mouseover（函数（）{
$（'#cs导航-'+el.id）.show（）；
});
$（'#cs title-'+el.id）.mouseout（函数（）{
$（'#cs导航-'+el.id）.hide（）；
});
if（参数[el.id].hoverPause）{
$（'.cs-'+el.id）.mouseover（函数（）{
参数[el.id].pause=true；
});
$（'.cs-'+el.id）.mouseout（函数（）{
参数[el.id].pause=false；
});
$（'#cs title-'+el.id）.mouseover（函数（）{
参数[el.id].pause=true；
});
$（'#cs title-'+el.id）.mouseout（函数（）{
参数[el.id].pause=false；
});
}
};
$.transitionCall=函数（el）{
clearInterval（间隔[el.id]）；
delay=params[el.id].delay+params[el.id].spw*params[el.id].sph*params[el.id].sDelay；
间隔[el.id]=setInterval（函数（）{
美元转换（el）
}，延误）；
}
$.transition=功能（el，方向）{
if（params[el.id].pause==true）返回；
美元效应（el）；
squarePos[el.id]=0；
appInterval[el.id]=setInterval（函数（）{
美元上诉（el，订单[el.id][squarePos[el.id]]
}，params[el.id].sDelay）；
$（el）.css({
“背景图像”：“url（'+images[el.id][imagePos[el.id]]]+'）”
});
if（typeof（direction）=“未定义”）imagePos[el.id]++；
否则，如果（方向=='prev'）图像位置[el.id]--；
else imagePos[el.id]=方向；
if（imagePos[el.id]==图像[el.id].长度）{
imagePos[el.id]=0；
}
如果（imagePos[el.id]=-1）{
imagePos[el.id]=图像[el.id]。长度-1；
}
$（'.cs-button-'+el.id）.removeClass（'cs-active'）；
$（'#cs按钮-'+el.id+“-”+（imagePos[el.id]+1））.addClass（'cs-active'）；
if（标题[el.id][imagePos[el.id]]{
$（'#cs title-'+el.id）.css({
“不透明度”：0
}).制作动画({
“不透明度”：参数[el
var heightYouWish = 400;
$('#myDom').CoinSlider({'height':heightYouWish});