带有ajax的jquery简单图像滑块答案

【问题标题】：jquery simple image slider w/ajax带有ajax的jquery简单图像滑块
【发布时间】：2010-10-16 17:19:16
【问题描述】：

我的页面上有很多图片，并且只想按需加载额外的图片。 IE 如果用户单击它或将鼠标悬停在上面，无论如何。我见过的大多数（如果不是全部）滑块都使用 hidden 属性，所有元素都会同时加载，这在我的情况下会造成过度的负担。

我喜欢：http://nivo.dev7studios.com/，但它没有这样的功能。

有人知道最好使用 jquery 的 ajax 滑块吗？

谢谢

【问题讨论】：

请问您的问题是怎么解决的？
我还没有。 jcarousel 会起作用，但它比我需要的要复杂。 ;-(

标签： jquery-plugins jquery slider

【解决方案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>";

}

【讨论】：