带有ajax的jquery简单图像滑块 [英] jquery simple image slider w/ajax

问题描述

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

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.

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

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

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

Anyone know of an ajax slider preferably using jquery?

谢谢

推荐答案

我认为你可以用 jcarousel 做到这一点:http://sorgalla.com/jcarousel/

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

诀窍是在javascript中一张一张地传递图像，而不是在html中，如果没有，总是预先加载.

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

代码是:

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

}

这篇关于带有ajax的jquery简单图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！