jquery - 带掩码覆盖的轻量级 JQuery slider

Question

我正在尝试在我的站点中实现一个轻量级的 JQuery slider 。我希望能够显示图片，就像它们坐在木框的图形中一样，木框略微重叠在照片的边缘上。 slider 正在工作，我已经尝试让我的透明 .png 图像框架掩码文件位于我的 slider div 之上，但我没有任何运气。你能提供一些见解吗？我认为这是一个 CSS 问题。

HTML:

<div id="container">
    <div class="mask"></div>
    <div id="slider">
        <div>
            <img src="images/1.jpg" alt="image01">
        </div>
        <div>
            <img src="images/2.jpg" alt="image02">
        </div>
        <div>
            <img src="images/3.jpg" alt="image03">
        </div>
    </div>
</div>

CSS:

#container {
    position: relative;
    width: 700px;
    height: 325px;
}

.mask {
    background: url('images/mask.png') no-repeat 0 0;
    width: 700px;
    height: 325px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
}

#slider {
    position: relative;
    width: 700px;
    height: 325px;
}

#slider > div {
    position: absolute;
    top: 0;
    left: 0;
}

JQuery:

$(function() {
    $("#slider > div:gt(0)").hide();

    setInterval(function() {
        $('#slider > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slider');
    }, 4000);
});

感谢您的帮助!

jsFiddle:http://jsfiddle.net/qpL3B/

Answer 1

我建议您使用像 jquery slide 这样的插件。

http://jquery.malsup.com/cycle/

这是一个例子:

http://jsfiddle.net/lucuma/NFnCC/

代码非常简单:

$('#slideshow').cycle({fx:'fade'})


<div id="sliders">
    <img src="http://s15.postimage.org/wg26u64jf/mask.png" />
  <div id="slideshow">
    <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
    <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
    <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
    <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>
</div>