0

我有一个幻灯片，它从右到左旋转三个图像。一切正常，除了在前一个图像已经完全滑出之后图像滑入（在图像之间留下空白）。我尝试了使用setIntervalandhide和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/

关于如何让图像在滑入/滑出时相互拥抱（中间没有空间）的任何想法？

注意：我不拥有任何图像，也不会将自己与它们托管的网站相关联。我只是以这些为例，因为我实际使用的图像只是在目录中，而不是 url。

任何帮助将非常感激！

4

1 回答 1

3

这只是一个标记的例子。首先，您的班级名称和1不正确。课程永远不能以数字开头。23

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

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

于 2013-08-25T01:32:57.207 回答