javascript - 在 div 的图像 slider 中将每个图像居中

Question

/* 嗨，我在 HTMl 中有一个带有图像的基本 slider ，当图像具有相同大小时，我可以使用 css 完美地设计它的样式。不幸的是，当一些图片更宽时，他也会为那些宽度较小的图片占据最宽图片的中心。我的问题是:我可以一次拍摄一张照片的边距自动和放置位置吗？ */

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
$(".sliderzps > Img.1").fadeIn(300);
startSlider();
});

function startSlider(){
count = $(".sliderzps > Img").size();


loop = setInterval(function() {

if(sliderNext > count) {
    sliderNext = 1; 
    sliderInt= 1;

}

$(".sliderzps > Img").fadeOut(0);
$(".sliderzps > Img." + sliderNext).fadeIn(0);
sliderInt = sliderNext;
$(".sliderzps > Img.1").css({"margin-left": "auto", "margin-right": "auto"});
sliderNext = sliderNext +1;
}, 3000)
}
var main = function () {
"use strict";
/* code hier */};

Answer 1

试试这个我的代码:

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
    $(".sliderzps > img").hide();
    $(".sliderzps > img").eq(0).fadeIn(0);
    startSlider();
});

function startSlider(){
    count = $(".sliderzps > img").size();
    loop = setInterval(function() {
    if(sliderNext >= count) {
        sliderNext = 0; 
    }
    $(".sliderzps > img").fadeOut(0);
    $(".sliderzps > img").eq(sliderNext).fadeIn(0);
    sliderInt = sliderNext;
    sliderNext++;
    }, 3000);
}

.sliderzps{
    width:200px;
    margin:auto;
    border:1px solid #323232;
    padding:5px;
}
img{
    margin:auto;
    width:40px;
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sliderzps">
<img src="http://www.clarkcraft.co.uk/images/des/48040.jpg"/>
<img src="http://glamorouslymommy.com/wp-content/uploads/2013/05/small-background1.jpg"/>
<img src="https://d21buns5ku92am.cloudfront.net/26027/images/149697-Symbid_logo_square_blue_bg_500px-a46cbc-medium-1416847903.jpg"/>
</div>