JS和CSS居中幻灯片图像

Question

I have a slideshow that pulls its first image from a div, then pulls the rest of the images from an array of list items. 我有一个幻灯片显示，它从div中提取其第一张图像，然后从列表项的数组中提取其余图像。 I am following a tutorial exactly from The JavaScript Pocket Guide by Burdette (2010 printing), and while everything else works I cannot get any of the pictures after the first to center or align differently. 我正在严格按照Burdette撰写的 《 JavaScript Pocket Guide》 （2010年印刷）中的指南进行操作，尽管其他所有方法都起作用，但在第一个居中或对齐方式不同后，我无法获得任何图片。 They float left and to the top of the div. 它们向左浮动并到达div的顶部。

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

The main problem here is in your CSS: 这里的主要问题在您的CSS中：

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

Margin: auto; 保证金：自动； will only work on objects that have a defined width. 仅适用于具有定义宽度的对象。 Since an image is a replaced inline-block, no real width exists. 由于图像是替换的行内块，因此不存在实际宽度。 This is made worse by the fact that you've positioned it absolutely, which changes the way margins will work - the item will always pick up its position relative to the determined parent, and apply margins after that outside of the flow, so auto will not be relevant. 由于您已将其绝对定位，这会改变边距的工作方式，从而使情况变得更糟-该项目将始终相对于确定的父对象提高其位置，并在流程外部应用该边距，因此自动不相关。

first step is to remove the absolute positioning on the image, it's not useful here. 第一步是删除图像上的绝对位置，在这里没有用。

By default, images are a type of inline-block, so simply adding "text-align:center;" 默认情况下，图像是一种内联块，因此只需添加“ text-align：center;” to the "#slideshow .slides" selector will center the images. 到“ #slideshow .slides”选择器将使图像居中。

Alternately, if we just want to edit the images and force them to center themselves, change the above block to: 或者，如果我们只想编辑图像并强迫它们居中，则将上面的块更改为：

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

and everything should line up like you wanted. 一切都应该按照您的意愿排列。

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