Javascript jQuery幻灯片图像延迟

我有一个幻灯片，从右到左旋转三个图像。一切正常，除了在上一张图像已经完全滑出后滑入的图像（在图像之间留下空白）。我用

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:

HTML:

JSFIDDLE：

有没有办法让图片在滑入/滑出时互相拥抱（中间没有空间）

注意：我不拥有任何图像，也不与它们所在的网站有关联。我只是用它们作为例子，因为我实际使用的图像只是在一个目录中，而不是一个url

---

任何帮助都将不胜感激

这只是标记的一个例子。首先，您的类名

1

、

2

和

3

不正确。一个类永远不能以数字开头

第二，用

包装图片-包装总是很好的！然后，应将3个图像

包裹在内包装中。您需要滑动内包装。最好是使用jQuery动画并循环它

---

这把小提琴怎么样

这只是标记的一个例子。首先，您的类名

1

、

2

和

3

不正确。一个类永远不能以数字开头

第二，用

包装图片-包装总是很好的！然后，应将3个图像

包裹在内包装中。您需要滑动内包装。最好是使用jQuery动画并循环它

---

这把小提琴怎么样

你能做一个JSFIDLE吗？我将JS代码从body

onload

函数更改为

$（document）.ready（）

，因为它将“Slider（）”视为未定义。（可能是因为它在HTML之前读取脚本？）你能制作一个JSFIDLE吗？我将JS代码从body

onload

函数更改为

$（document）.ready（）

，因为它将“Slider（）”视为未定义。（可能是因为它在HTML之前读取脚本？）！非常感谢你！完美的非常感谢你！

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

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