这个lightbox有一个窗口容器，容器里面有一个长的容器，横向包住了所有图片，通过改变他的margin-left来实现左右效果的。
图片下方有图片个数对应的黑方块，点击黑方块也可以跳到对应的图片上去；
这个插件的最大的特点是可以根据里面的图片个数来实现切换，而且当滑到最后一张图片的时候时，再次点击右侧的按钮，右边回出现第一张图片，这样实现了循环播放。
图片的样式和按钮的样式我没有来得及调试，大家可以按照自己想要的效果来更改css
具体代码如下:
~function(){function autobanner(cureleid,ajaxurl,interval){//把之前存储获取元素的变量都作为当前实例的私有属性this.banner = document.getelementbyid(cureleid);this.bannerinner = utils.firstchild(this.banner);this.bannertip = utils.children(this.banner,ul)[0];this.bannerlink = utils.children(this.banner,'a');this.bannerleft = this.bannerlink[0];this.bannerright = this.bannerlink[1];this.divlist = this.bannerinner.getelementsbytagname('div');this.imglist = this.bannerinner.getelementsbytagname('img');this.olis = this.bannertip.getelementsbytagname('li');//之前的全局变量也应该变为自己的私有属性this.jsondata = null;this.interval = interval || 3000;this.autotimer = null;this.step = 0;this.ajaxurl = ajaxurl;//返回当前实例return this.init(); } autobanner.prototype = { constructor:autobanner,//ajax请求数据getdata:function(){var _this = this;var xhr = new xmlhttprequest; xhr.open(get,this.ajaxurl + ?_=+math.random(),false); xhr.onreadystatechange = function(){if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){ _this.jsondata = utils.formatjson(xhr.responsetext) } } xhr.send(null) },//实现数据绑定binddata:function(){var str = ,str2 = ;if(this.jsondata){for(var i = 0,len=this.jsondata.length;i<len;i++){var curdata = this.jsondata[i]; str+='<div><img src="" alt="" trueimg="'+curdata['img']+'"></div>'; i===0?str2+=<li class='bg'></li>:str2+=<li></li>} }this.bannerinner.innerhtml = str;this.bannertip.innerhtml = str2; },//延迟加载lazyimg:function(){var _this = this;for(var i = 0,len = this.imglist.length;i