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

Question

我相信我有一个问题需要用 javascript 解决，但不知道如何开始，所以希望 javascript 社区的人可以提供帮助。

基本上，以下代码允许我将 10 张图像加载到幻灯片轮播中。 但是，这些图像是 600 像素 x 400 像素纵向或 400 像素 x 600 横向。我遇到的问题是风景图像 与容器顶部垂直对齐。

我已经设法通过在我的 CSS 文件 image-P 和 image-L 中创建两个类来解决这个问题

image-L 有一个“padding-top:100px”，它成功地将横向图像垂直对齐在中心。

我想做的是让代码检查哪些图像是横向的，然后创建

return '<img src="Images/' + item.url + '" class="image-L" alt="" />';

还有其他用途

return '<img src="Images/' + item.url + '" class="image-P" alt="" />';

提前非常感谢。

罗伯干杯。

<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) {
        return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
    };

    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            size: mycarousel_itemList.length,
            itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
        });
    });

Answer 1

您可以尝试使用 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

Answer 2

我的解决方案：

    <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>

Answer 3

<%@ 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>