2014-10-02 108 views

回答

1

不需要庫或插件

$("#slideshow > div:gt(0)").hide(); 
 

 
setInterval(function() { 
 
    $('#slideshow > div:first') 
 
    .fadeOut(1000) 
 
    .next() 
 
    .fadeIn(1000) 
 
    .end() 
 
    .appendTo('#slideshow'); 
 
}, 3000);
#slideshow { 
 
    margin: 50px auto; 
 
    position: relative; 
 
    width: 240px; 
 
    height: 240px; 
 
    padding: 10px; 
 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
 
} 
 

 
#slideshow > div { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    right: 10px; 
 
    bottom: 10px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slideshow"> 
 
    <div> 
 
    <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"> 
 
    </div> 
 
    <div> 
 
    <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"> 
 
    </div> 
 
    <div> 
 
    Pretty cool eh? This slide is proof the content can be anything. 
 
    </div> 
 
</div>

see example

另一

only CSS and HTML documentation

+1

+1背景圖像稍微修改後的代碼:http://jsbin.com/pofez/2/edit – 2014-10-02 18:16:49