Question

我有一个幻灯片，它从div中提取第一个图像，然后从列表项的数组中提取其余图像。我正在通过 Burdette （2010年印刷）完全从 The JavaScript Pocket Guide 开始学习教程，虽然其他所有工作都无法在第一个到中心之后获得任何图片或者对齐不同。它们向左浮动并到达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 个答案: