Question

/ *嗨，我在HTMl中有一个带有图像的基本滑块，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>

将每个图像置于div中的图像滑块中

1 个答案: