重量輕的JQuery滑塊瓦/覆蓋

我想實現一個輕量級的JQuery滑塊到我的網站。我希望能夠顯示圖片，就像他們坐在木製框架的圖形中一樣，木製框架與照片的邊緣略有重疊。該滑塊正在工作，我試圖讓我的透明.png圖像幀蒙版文件躺在我的滑塊div頂部，但我沒有任何運氣。你能否提供一些見解？我認爲這是一個CSS問題。重量輕的JQuery滑塊瓦/覆蓋

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/

來源

2012-06-10 kaffolder

您不能建立這樣一個滑塊。所有的事件都會在同一時間運行。你需要你 – lucuma

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

來源

2012-06-10 02:25:06 lucuma

重量輕的JQuery滑塊瓦/覆蓋

回答

相關問題