Question

我有一个幻灯片，可以从右到左旋转三个图像。一切正常，除了在前一个图像已经完全滑出之后图像滑入（在图像之间留下白色空间）。我使用setInterval和hide以及show函数尝试了不同的时间，但没有用。

JavaScript的：

$(document).ready(function(){
    $(".slider .1").show("fade", 500);
    $(".slider .1").delay(5500).hide("slide", {direction:"left"}, 500);

    var sc = $(".slider img").size();
    var count = 2;

    setInterval(function() {
        $(".slider ."+count).show("slide", {direction:"right"}, 500);
        $(".slider ."+count).delay(5500).hide("slide", {direction:'left'}, 500);

        if(count == sc) {
            count = 1;
        } else {
            count = count + 1;
        }
    }, 6500);

});

CSS：

.slider {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 30px auto;
    background-image: url('http://www.thatssotrue.com/images/ajax_loader.gif');
    background-size: 50px 50px;
    background-position: center center;
    background-repeat: no-repeat;
}

.slider img {
    width: 200px;
    height: 200px;
    display: none;
}

HTML：

    <div class="slider">
        <img class="1" src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg" height="200" width="200">
        <img class="2" src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg" height="200" width="200">
        <img class="3" src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg" height="200" width="200">
    </div>

JSFIDDLE ：http://jsfiddle.net/6FF4y/2/

关于如何让图像在滑入/滑出时彼此拥抱（两者之间没有空间）的任何想法？

注意：我不拥有任何图片，也不会将自己与托管的网站联系起来。我只是以这些为例，因为我实际使用的图像只是在一个目录中，而不是一个网址。

非常感谢任何帮助！

Answer 1

这只是标记的一种情况。首先，您的班级名称1，2和3不正确。一个班级永远不能以数字开头。

其次，将图像包裹在<div>中 - 包装总是好的！然后3个图像<div>应该包裹在内包装中。你会想要滑动内包装。你最好的选择是使用jQuery动画并循环它。

这个小提琴怎么样？ http://jsfiddle.net/6FF4y/4/

jQuery幻灯片图像延迟

1 个答案: