jquery插件圖片淡入/淡出

Question

有誰知道一個小腳印的jQuery插件，它像一個滑塊，但淡入圖像（S），而不是。

我發現這個http://nivo.dev7studios.com/，但它似乎很重。有誰知道一個簡單的插件？

謝謝

Answer 1

這是一個輕量級的做事方式，我用過。

HTML：

<div id="feature"> 
    <div id="overlay"></div> 
    <div class="slide" style="background: url(image.jpg) no-repeat;"> 
    <h2>Driven by strategy</h2> 
    </div> 
    <div class="slide" style="background: url(image.jpg) no-repeat;"> 
    <h2>Committed to our relationships</h2> 
    </div> 
    <div class="slide" style="background: url(image.jpg) no-repeat;"> 
    <h2>Changing it up </h2> 
    </div> 
</div> 

CSS：

/* Feature */ 
#feature { 
    width: 990px; 
    height: 500px; 
    overflow: hidden; 
    position: relative; 
} 

#feature .slide { 
    width: 990px; 
    height: 500px; 
} 

#feature #overlay { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    z-index: 99 !important; 
    width: 950px; 
    height: 45px; 
    line-height: 45px; 
    padding: 20px; 
    text-align: right; 
    background: transparent url(img/bg_feature_story.png) top left no-repeat; 
    color: #ffffff; 
} 

的JavaScript：

$(function(){ 
    $(".slide").hide(); 
    $(".slide:first").show(); 
    $("#feature").css("background-image", "null"); 
    setInterval(function(){ 
    changeImage(); 
    },5800); 

    $("#overlay").html(""); 
    $(".slide").each(function(){ 
     $("#overlay").append('<div class="slidetext" style="display:none;">' + $(this).html() + "</div>"); 
     $(this).html(""); 
    }); 
    $(".slidetext:first").show(); 


    function changeImage(){ 
    var $currImg = $(".slide:visible"); 
    var $currText = $(".slidetext:visible"); 
    if ($currImg.next().length == 1) { 
     var $next = $currImg.next(); 
     var $nexttext = $currText.next(); 
    } else { 
     var $next = $(".slide:first"); 
     var $nexttext = $(".slidetext:first"); 
    } 
    var bi = $currImg.css("background-image"); 
    $("#feature").css("background-image", bi); 
    $currImg.fadeOut(100, function(){ 
    }); 
    $next.fadeIn(1000, function(){ 
     $currText.hide(); 
     $nexttext.show(); 
    }); 
    } 
}); 

Answer 2

我開發了一個插件叫做Basic jQuery Slider - 這是使用和配置和非常小的文件大小非常簡單。另外它支持任何內容，而不僅僅是圖像。如果你決定嘗試一下並且有任何問題，那就問問！