2012-03-13 46 views
1

jq.carousel是否支持動態添加圖片? 我有'一些'按鈕, 我有一個按鈕,點擊它後,通過Ajax加載圖像數組,並將它們傳遞給滑塊。jq.carousel是否支持動態添加圖片?

var seplen=separatedLeft.length; //images array 
var carus = $('#carousel');  //will append images to this element 
var imglist='';     //we use this variable for optimization.. 
for(var i=0;i<seplen;i++){ 
    imglist+='<div class="carousel_box"><img src="content/'+separatedLeft[i]+'" alt="img" style="width:350px;height:450px;" /></div>'; //add all images what we have (actually there 2 or 3 images) 
    } 

carus.html(imglist); 

所以..圖片成功添加到滑塊,我可以在源一切都確定了HTML看到至少第一形象,但按鈕左側和右側(滑動圖像)不工作,也許有人知道爲什麼?

一部分,其中滑塊是

<div class="carousel"> 
    <div id="carousel" class="carousel_inner"> 
         //images will be here 
    </div> 

    <p class="btns"> 
     <input type="button" id="carousel_prev" value="prev"> 
     <input type="button" id="carousel_next" value="next"> 
    </p> 
</div> 


<style type="text/css"> 
#carousel{ 
    margin: 0 auto; 
    width: 350px; 
    height: 450px; 
    overflow: hidden; 
} 
#carousel .carousel_box{ 
    width: 350px; 
    height: 450px; 
    color: #fff; 
    background: #252525; 
    line-height: 450px; 
    text-align: center; 
    font-size: 123%; 
} 
#carousel .carousel_box.second{ 
background: #666; 
} 
#carousel .carousel_box.third{ 
    background: #999; 
} 

</style> 

<script type="text/javascript"> 
var $carousel = $('#carousel').carousel({ 
easing:'swing', 
duration: 0.2 // move duration 
}); 

$('#carousel_prev').live('click', function(ev) { 
    $carousel.carousel('prev'); 
}); 
$('#carousel_next').live('click', function(ev) { 
    $carousel.carousel('next'); 
}); 
</script> 

回答

1

根據您鏈接網站,有重置和刷新命令,你可以在添加內容至轉盤結合。你可以在頁面here上看到一個例子。

+0

是的,肯定 謝謝) – Denis 2012-03-13 19:45:00