Question

我正在尝试在我的网站中实现一个轻量级的JQuery滑块。我希望能够显示图片，就像他们坐在木框架的图形中，木框架轻微地重叠在照片的边缘。滑块正在工作，我已经尝试将透明的 .png 图像帧掩码文件放在我的滑块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幻灯片这样的插件。

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>

轻量级JQuery滑块带遮罩覆盖

1 个答案: