JS和CSS居中幻燈片圖像

Question

我有一個幻燈片顯示，它從div中提取其第一張圖像，然后從列表項的數組中提取其余圖像。 我正在嚴格按照Burdette撰寫的 《 JavaScript Pocket Guide》 （2010年印刷）中的指南進行操作，盡管其他所有方法都起作用，但在第一個居中或對齊方式不同后，我無法獲得任何圖片。 它們向左浮動並到達div的頂部。

HMTL：

<!DOCTYPE html>
<hmtl class="no-js">

<head>
    <title>Slideshow</title>
    <link rel="stylesheet" href="slideshow.css" type="text/css" />

    <script type="text/javascript">
    (function(d, c) { d[c] = d[c].replace(/\bno-js\b/,"js";})(document.documentElement, "className");
    </script>

</head>


<body>
        <div id="slideshow">

            <div class="slides">
                <img src="picture01.jpg" width="450" height="336" alt="stuff" />
            </div>  

            <ul>
                <li><a href="picture02.jpg" data-size="350x263"</li>
                <li><a href="picture03.jpg" data-size="350x263"</li>
                <li><a href="picture04.jpg" data-size="350x263"</li>
            </ul>

        </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript">
    </script>

    <script src="slideshow.js" type="text/javascript">
    </script>


</body>

</hmtl>

CSS：

#slideshow {
    background-color: #103f1c; 
    width:500px;
    height:450px;
    margin-left: auto;
    margin-right: auto;
    top:0px;
    position: relative;
}

#slideshow .slides {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
}

#html.js #slideshow .slides img{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

#slideshow .next,
#slideshow .prev {
    position: absolute;
    top: 50%;
    margin-top: -0.5em;
    width: 40px;
    font-size: 32px;
    text-decoration: none;  
}

#slideshow .next{
    right: -50px;
    padding-left:10px;
}

#slideshow .prev {
    left:-50px;
    padding-right: 10px;
    text-align: right;  
}

JS：

(function($) {

    // Include utility jQuery plug-ins

    $.fn.tallest = function(outer, margins) {
        var fn = outer ? "height" : "outerHeight";
        return Math.max.apply(Math, $.map(this, function(el) {
            return $(el)[fn](margins);
        }));
    };

    $.fn.widest = function(outer, margins) {
        var fn = outer ? "width" : "outerWidth";
        return Math.max.apply(Math, $.map(this, function(el) {
            return $(el)[fn](margins);
        }));
    };

    // Declare initial variables

    var slideshow = $("#slideshow");
    var slides = slideshow.find(".slides");
    var currentImageIndex = 0;

    // Create images from the link list

    slideshow.find("ul a").each(function() {

        var link = $(this);
        var size = link.attr("data-size").split("x");

        $("<img />").attr({
            src : link.attr("href"),
            width : size[0],
            height : size[1],
            alt : link.text()           
        }).hide().appendTo(slides);
    });

    // Collect all images in one node set and hide the list

    var images = slides.find("img");
    slideshow.find("ul").hide();

    // Resize slides <div> to hold the largest images

    var slidesWidth = images.widest();
    var slidesHeight = images.tallest();

    slides.css({
        width : slidesWidth,
        height : slidesHeight
    });

    // Center each image

    images.each(function() { 
        var image = $(this);
        image.css({
            left: slidesHeight / 2 - image.width() / 2,
            top: slidesHeight / 2 - image.height() / 2,
        });
    });

    // Save a reference to the first image

    var activeImage = images.eq(currentImageIndex);

    // The function to show the next or previous image

    function showImage(newIndex) {
        currentImageIndex = newIndex >= images.length ? 0 : newIndex;
        currentImageIndex = currentImageIndex < 0 ? images.length - 1 : currentImageIndex;
        activeImage.fadeOut(0);
        activeImage = images.eq(currentImageIndex).fadeIn(150); 

    }

    // Start timer to cycle through images

    var interval = setInterval(function() {
        showImage(currentImageIndex + 1);
    }, 5000);

    // Create next and previous controls

    $('<a href="#" class="next" style="color:white">\u232A</a>').appendTo(slides).bind("click", +1, onClick);
    $('<a href="#" class="prev" style="color:white">\u2329</a>').appendTo(slides).bind("click", -1, onClick);

    // The event handler for the controls   

    function onClick(event) {
        event.preventDefault();
        clearInterval(interval);
        showImage(currentImageIndex + event.data);  
    }

})(jQuery); // Self-invoking function executes automatically

Answer 1

這里的主要問題在您的CSS中：

#html.js #slideshow .slides img{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

保證金：自動； 僅適用於具有定義寬度的對象。 由於圖像是替換的行內塊，因此不存在實際寬度。 由於您已將其絕對定位，這會改變邊距的工作方式，從而使情況變得更糟-該項目將始終相對於確定的父對象提高其位置，並在流程外部應用該邊距，因此自動不相關。

第一步是刪除圖像上的絕對位置，在這里沒有用。

默認情況下，圖像是一種內聯塊，因此只需添加“ text-align：center;” 到“ #slideshow .slides”選擇器將使圖像居中。

或者，如果我們只想編輯圖像並強迫它們居中，則將上面的塊更改為：

#html.js #slideshow .slides img{
    display:block;
    margin-left: auto;
    margin-right: auto;
}

一切都應該按照您的意願排列。

JS和CSS居中幻燈片圖像

問題描述

1 個解決方案

解決方案1
1 已采納 2015-04-30 18:30:58

JS和CSS居中幻燈片圖像

問題描述

1 個解決方案

解決方案1 1 已采納 2015-04-30 18:30:58

解決方案1
1 已采納 2015-04-30 18:30:58