jQuery的简单图像滑块瓦特/阿贾克斯 [英] jquery simple image slider w/ajax

问题描述

我的页面上有很多图像，只想按需加载额外的图像. IE(如果用户单击它或将鼠标悬停在IE上).我见过的大多数(如果不是全部)滑块都使用hidden属性，所有元素一次加载，这会给我造成不必要的负担.

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

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

谢谢

解决方案

我认为您可以使用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>";

}

I have a page with lots of images on it, and only want to load extra images on demand. IE if the user clicks on it or mouses over, whatever. Most if not all of the sliders i've seen use the hidden attribute with all the elements getting loaded at once, which would cause undue burden in my case.

I liked: http://nivo.dev7studios.com/ but it has no such feature.

Anyone know of an ajax slider preferably using jquery?

Thanks

解决方案

I think you can do that with jcarousel: http://sorgalla.com/jcarousel/

The trick is to pass the images one by one in javascript, not in html, if not, there are always loaded beforehand.

The code would be:

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>";

}

这篇关于jQuery的简单图像滑块瓦特/阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！