0

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

一切正常，除了我想要多个幻灯片，每个都是缩略图。所以当我添加多个相同的东西时，它就坏了。我注意到它使用id,slideshow和ids 必须是唯一的，所以我把它改成了class. 现在一切正常，但似乎破坏了fadeIn()andfadeOut()功能？或者至少，这似乎是它所做的。这是一个小提琴：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);
});

注意：我在 some spans 中添加了一个图像，它覆盖了幻灯片，你必须将鼠标悬停在它上面才能让它消失（好像在悬停它之后开始幻灯片）。

有任何想法吗？任何帮助将非常感激。

编辑：我发现如果我删除其他幻灯片（只有一个），淡入淡出效果很好。只有一次我添加多个。但是类可以是非唯一的，对吧？那么为什么脚本会中断呢？（而且它不像实际的脚本正在破坏，它只是淡入淡出的效果，否则滑块工作正常！）

4

2 回答 2

1

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

尽管这可能无法解决您的问题，但您需要担心的代码更少:)

于 2013-08-29T01:03:31.547 回答
1

我认为问题appendTo('.thumb')在于将附加到所有滑块上。而且，你的 span 让它重复第二张和第三张图片之间的循环，从不重新显示第一张。我会摆脱 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);
    });    
});
于 2013-08-30T22:12:12.577 回答