现在的网站经常会有一些图片轮播效果，网上也有很多各式各样的图片轮播插件，什么样的效果都有，这里分享一个我自己写的图片轮播效果
这个Lightbox有一个窗口容器，容器里面有一个长的容器，横向包住了所有图片，通过改变他的margin-left来实现左右效果的。
图片下方有图片个数对应的黑方块，点击黑方块也可以跳到对应的图片上去；
这个插件的最大的特点是可以根据里面的图片个数来实现切换，而且当滑到最后一张图片的时候时，再次点击右侧的按钮，右边回出现第一张图片，这样实现了循环播放。
带预览效果的炫酷js轮播图插件
下载
previewSlider是一款带预览效果的炫酷js轮播图插件。该轮播图在鼠标悬停到前后导航按钮上时，会出现展示缩略图按钮，点击后可以展示所有图片。点击任意缩略图则可以将其放大到全屏进行展示。
图片的样式和按钮的样式我没有来得及调试，大家可以按照自己想要的效果来更改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":str2+=""}
}this.bannerInner.innerHTMl = str;this.bannerTip.innerHTML = str2;
},//延迟加载lazyImg:function(){var _this = this;for(var i = 0,len = this.imgList.length;i
