使用 JS 代码在幻灯片放映中垂直居中图像

您可以尝试使用 Image 类 [2] 将图像加载到 JavaScript [1] 中，并检查图像本身的高度/宽度以确定要应用的类，但如果在加载时这样做，这会减慢速度。（我不知道浏览器是否会缓存该文件，以便您稍后显示该文件）。

似乎最好在将图像添加到文档/显示后等待并应用样式。

您可能可以使用jQuery来获取（浏览器）视图的高度和图像的高度，然后将图像绝对定位为居中。（如果您以后想使用不同的图像大小，这会更灵活）。

1. http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
2. http://www.w3schools.com/jsref/dom_obj_image.asp

我的解决方案：

    <script type="text/javascript">
    function preloader() {
        // counter     
        var i = 0;
        // create object     
        imageObj = new Image();
        // set image list     
        images = new Array();
        images[0] = "Images/image1.jpg"
        images[1] = "Images/image2.jpg"
        images[2] = "Images/image3.jpg"
        images[3] = "Images/image4.jpg"
        images[4] = "Images/image5.jpg"
        images[5] = "Images/image6.jpg"
        images[6] = "Images/image7.jpg"
        images[7] = "Images/image8.jpg"
        images[8] = "Images/image9.jpg"
        images[9] = "Images/image10.jpg"
        // start preloading     
        for (i = 0; i <= 9; i++) {
            imageObj.src = images[i];
        }
    }   
</script>

<script type="text/javascript">
    var mycarousel_itemList = [
{ url: "Images/Image1.jpg" },
{ url: "Images/Image2.jpg" },
{ url: "Images/Image3.jpg" },
{ url: "Images/Image4.jpg" },
{ url: "Images/Image5.jpg" },
{ url: "Images/Image6.jpg" },
{ url: "Images/Image7.jpg" },
{ url: "Images/Image8.jpg" },
{ url: "Images/Image9.jpg" },
{ url: "Images/Image10.jpg" }
];
    function mycarousel_itemLoadCallback(carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }
            if (i > mycarousel_itemList.length) {
                break;
            }
            carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
        }
    };
    /**
    * Item html creation helper.
    */
    function mycarousel_getItemHTML(item) {
        return '<img src="' + item.url + '" class="image" alt="" />';
    };
    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            size: mycarousel_itemList.length,
            itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
        });
    });
</script>

<%@ Page Title="" Language="C#" MasterPageFile="~/rwmSite.master" AutoEventWireup="true"
    CodeFile="Portfolio.aspx.cs" Inherits="Portfolio" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.jcarousel.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        var mycarousel_itemList = [
            { url: "Image1.jpg" },
            { url: "Image2.jpg" },
            { url: "Image3.jpg" },
            { url: "Image4.jpg" },
            { url: "Image5.jpg" },
            { url: "Image6.jpg" },
            { url: "Image7.jpg" },
            { url: "Image8.jpg" },
            { url: "Image9.jpg" },
            { url: "Image10.jpg"}];
        function mycarousel_itemLoadCallback(carousel, state) {
            for (var i = carousel.first; i <= carousel.last; i++) {
                if (carousel.has(i)) {
                    continue;
                }
                if (i > mycarousel_itemList.length) {
                    break;
                }
                carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
            }
        };
        /**
        * Item html creation helper.
        */
        function mycarousel_getItemHTML(item) {
            var x = new Image(); x.src = item.url;
            while (!x.complete)
                if (x.height <= 400)
                    return '<img src="../Images/' + item.url + '" class="image-L" alt="" />';
                else
                    return '<img src="../Images/' + item.url + '" class="image-P" alt="" />';
        };
        jQuery(document).ready(function () {
            jQuery('#mycarousel').jcarousel({
                size: mycarousel_itemList.length,
                itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div id="wrap" align="center">
        <div class=" jcarousel-skin-tango">
            <div class="jcarousel-container jcarousel-container-horizontal">
                <div class="jcarousel-clip jcarousel-clip-horizontal">
                    <ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
                    </ul>
                </div>
                <div class="jcarousel-prev jcarousel-prev-horizontal">
                </div>
                <div class="jcarousel-next jcarousel-next-horizontal">
                </div>
            </div>
        </div>
    </div>
</asp:Content>