Javascript JS和CSS居中幻灯片图像_Javascript_Jquery_Html_Css

Javascript JS和CSS居中幻灯片图像

javascript jquery html css

Javascript JS和CSS居中幻灯片图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个幻灯片，它从一个div中提取第一个图像，然后从列表项数组中提取其余的图像。我完全按照Burdette的JavaScript Pocket Guide（2010 printing）中的一个教程进行操作，虽然其他一切都正常，但我无法在第一次操作后获得任何图片，以不同的方式居中或对齐。他们向左漂，漂到了舱顶 HMTL: <!DOCTYPE html> <hmtl class="no-js"> <head> <title>Slidesho

我有一个幻灯片，它从一个div中提取第一个图像，然后从列表项数组中提取其余的图像。我完全按照Burdette的JavaScript Pocket Guide（2010 printing）中的一个教程进行操作，虽然其他一切都正常，但我无法在第一次操作后获得任何图片，以不同的方式居中或对齐。他们向左漂，漂到了舱顶

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>

#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;  
}

(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

JS:

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

#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;  
}

(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

（函数（$）{
//包含实用工具jQuery插件
$.fn.1=函数（外部，边距）{
var fn=外部？“高度”：“外部高度”；
返回Math.max.apply（Math，$.map）（此函数为el）{
返回美元（el）[fn]（保证金）；
}));
};
$.fn.widest=函数（外部，边距）{
var fn=外部？“宽度”：“外部宽度”；
返回Math.max.apply（Math，$.map）（此函数为el）{
返回美元（el）[fn]（保证金）；
}));
};
//声明初始变量
var slideshow=$（“#slideshow”）；
var slides=slideshow.find（“.slides”）；
var currentImageIndex=0；
//从链接列表创建图像
slideshow.find（“ula”）.each（函数（）{
var-link=$（这个）；
变量大小=link.attr（“数据大小”）.split（“x”）；
$（）以保存最大的图像
var slidesWidth=images.widtest（）；
var slidesHeight=images.highter（）；
slides.css({
宽度：滑块宽度，
高度：幻灯片高度
});
//将每个图像居中
images.each（函数（）{
var image=$（这是）；
image.css({
左：幻灯片权重/2-image.width（）/2，
顶部：幻灯片权重/2-image.height（）/2，
});
});
//保存对第一个图像的引用
var activeImage=images.eq（currentImageIndex）；
//显示下一个或上一个图像的功能
函数showImage（newIndex）{
currentImageIndex=newIndex>=images.length？0:newIndex；
currentImageIndex=currentImageIndex<0？images.length-1:currentImageIndex；
动态图像淡出（0）；
activeImage=images.eq（currentImageIndex）.fadeIn（150）；
}
//启动计时器以循环浏览图像
var interval=setInterval（函数（）{
showImage（currentImageIndex+1）；
}, 5000);
//创建下一个和上一个控件
$（“”）.appendTo（幻灯片）.bind（“单击“，+1，onClick”）；
$（“”）.appendTo（幻灯片）.bind（“单击”、-1、onClick）；
//控件的事件处理程序
函数onClick（事件）{
event.preventDefault（）；
间隔时间；
showImage（currentImageIndex+事件数据）；
}
})（jQuery）；//自动执行自调用函数

这里的主要问题在于CSS：

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

页边距：自动；仅适用于具有定义宽度的对象。由于图像是替换的内联块，因此不存在实际宽度。更糟糕的是，您完全定位了图像，这改变了页边距的工作方式-项目将始终拾取其相对于已确定父项的位置，并在在流量之外，所以自动将不相关

第一步是删除图像上的绝对位置，这在这里没有用处

默认情况下，图像是一种内联块，因此只需在“#slideshow.slides”选择器中添加“text align:center；”即可使图像居中

或者，如果我们只想编辑图像并强制它们自身居中，请将上面的块更改为：

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

所有的东西都应该按你想要的那样排列。

为什么要添加这段代码

images.each（function（）{var image=$（this）；image.css（{左：slidesHeight/2-image.width（）/2，上：slidesHeight/2-image.height（）/2，}）；}）

？从css

#html.js#幻灯片中。幻灯片img

删除

位置：绝对。这样，您就不需要在javascript中指定顶部和左侧属性。您发布了大量代码。请添加一个jsfiddle或类似内容将文本对齐：居中；
添加到幻灯片中。幻灯片效果良好很好，谢谢！