Question

我正在使用Chris Coyier的这个非常基本的淡入淡出幻灯片：http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

一切正常，除了我想要多个幻灯片，每个都是缩略图。所以当我添加多个相同的东西时，它就破了。我注意到它使用id slideshow，而id必须是唯一的，因此我将其更改为class。现在一切正常，但它似乎打破了fadeIn()和fadeOut()功能？或者至少，这似乎已经完成了。这是一个小提琴：http://jsfiddle.net/QRZKE/

HTML ：

<div class="thumb" id="first">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="second">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="third">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="fourth">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="fifth">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>

CSS：

    .thumb {
        position: relative;
        width: 240px;
        height: 240px;
        padding: 10px;
        background: white;
        box-shadow: 0 0 20px rgba(0, 0, 0, .4);
    }

    .thumb > div {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 2;
    }

    .thumb > span {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 3;
        -webkit-transition: all .65s ease-in;
        -moz-transition: all .65s ease-in;
        -ms-transition: all .65s ease-in;
        -o-transition: all .65s ease-in;
        transition: all .65s ease-in;
    }

    .thumb > span:hover {
        opacity: 0;

    }

    .thumb img {
        height: 240px;
        width: 240px;
    }

JavaScript的：

$(document).ready(function() {
$(".thumb > div:gt(0)").hide();
setInterval(function() {
    $(".thumb > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo(".thumb");
}, 2500);
});

注意：我在一些涵盖幻灯片放映的span内添加了一张图片，你必须将鼠标悬停在其上以使其消失（就像在悬停后开始幻灯片放映一样）在它上面。）

有什么想法吗？任何帮助将不胜感激。

编辑：我发现如果删除其他幻灯片（只有一个），则淡入淡出效果正常。这只是我添加多个。但是允许课程不是唯一的，对吧？那脚本为什么会破坏呢？（并且它不像实际的脚本打破，它只是褪色效果，否则滑块工作正常！）

Answer 1

如果我是你，我会删除跨度并扩展javascript。例如，您可以使用mouseenter: function(){ // start interval}并使用mouseleave: function(){ // reset interval }重置它。

虽然这可能无法解决您的问题，但您需要担心的代码较少：）

Answer 2

我认为问题是appendTo('.thumb')将附加到所有滑块上。并且，你的跨度使它重复第二和第三张图片之间的循环，从不重复第一张。我将摆脱css假冒幻灯片放映没有显示并在悬停时添加间隔。我这样做（http://jsfiddle.net/QRZKE/18/）：

CSS

 .thumb {
        position: relative;
        width: 240px;
        height: 240px;
        padding: 10px;
        background: white;
        box-shadow: 0 0 20px rgba(0, 0, 0, .4);
    }

    .thumb > div {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 2;
    }

    .thumb img {
        height: 240px;
        width: 240px;
    }

HTML

<div class="thumb" id="first">
    <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="http://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="second">
    <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="third">
    <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="fourth">
    <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="http://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="fifth">
    <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>

的Javascript

$(document).ready(function () {
    var interval;
    $('.thumb').each( function () {
        var id = $(this).attr('id');
        $("#" + id + " > div:gt(0)").hide();
    });

    $('.thumb').hover(function() {
       var id = $(this).attr('id');
        console.log(id);
        interval = setInterval(function () {
            $("#" + id + " > div:first")
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo("#" + id);
        }, 2500);
    }, function() {
        clearInterval(interval);
    });    
});

.fadeIn（）和.fadeOut（）函数坏了吗？

2 个答案: