0

我正在尝试在我的网站中实现一个轻量级的 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;
}

查询：

$(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/

4

1 回答 1

0

我建议你使用像 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>

​</p>

于 2012-06-10T02:25:06.830 回答