jQuery простой слайдер изображений с AJAX - PullRequest
Новая
       2

jQuery простой слайдер изображений с AJAX

0 голосов
/ 16 октября 2010

У меня есть страница с большим количеством изображений, и я хочу загружать только дополнительные изображения по требованию.То есть, если пользователь нажимает на него или наводит мышью, что угодно.Большинство, если не все, ползунки, которые я видел, используют атрибут hidden со всеми загружаемыми элементами одновременно, что в моем случае может привести к чрезмерной нагрузке.

Мне понравилось: http://nivo.dev7studios.com/ но у него нет такой функции.

Кто-нибудь знает о слайдере ajax, предпочтительно использующем jquery?

Спасибо

1 Ответ

1 голос
/ 16 октября 2010

Я думаю, вы можете сделать это с помощью 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>";

}
...