jquery簡單圖像滑塊瓦特/ ajax

Question

我有一個頁面上有很多圖像，只想要加載額外的圖像按需。 IE瀏覽器如果用戶點擊它或鼠標懸停，無論如何。大部分（如果不是全部）我看到的滑塊使用隱藏屬性，所有元素一次加載，這會對我的情況造成不必要的負擔。

我喜歡：http://nivo.dev7studios.com/但它沒有這樣的功能。

任何人都知道最好使用jQuery的ajax滑塊？

感謝

Answer 1

我認爲你可以做到這一點的jCarousel： http://sorgalla.com/jcarousel/

的竅門是通過一對一的傳遞圖像的JavaScript，HTML中沒有的，如果不是這樣，總是預先加載。

的代碼將是：

var mycarousel_itemList = [ 
{url:"/im/a.jpg", title: ""},{url:"/im/b.jpg", title: ""}]; 

listaimg=document.createElement('ul'); 
jQuery(listaimg).attr('id','mycarousel'); 
jQuery(listaimg).addClass('jcarousel-skin-tango'); 
jQuery('#containercarousel').append(listaimg); 
jQuery('#mycarousel').jcarousel({ auto: 9,wrap: 'last', visible: 1,scroll:1, size: mycarousel_itemList.length, 
    itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback} 

    }); 


function mycarousel_itemLoadCallback(carousel,state){for(var i=carousel.first;i<=carousel.last;i++){if(carousel.has(i)){continue}if(i>mycarousel_itemList.length){break}; 

carousel.add(i,mycarousel_getItemHTML(mycarousel_itemList[i-1])); 


    } 
}; 
function mycarousel_getItemHTML(item) 
{ 


    var img = new Image(); 
       $J(img).load(function() { 

// whatever you want to do while loading. 
    }).attr('src', item.url); 
return "<li><img src=\"" + item.url + "\" width=\"770\" alt=\"\" /></li>"; 

}