图片预览、画廊、查看、幻灯片插件
当年面对这样一个效果的时候，真是蛋疼，觉得自己尼玛出来还能靠这个吃饭嘛，唏嘘叹惋之余还是坚定信心，很多人都看不起你能做这一行（我特妈自己也不信），当你认真的做一件事时，自己都觉得可怕，加油吧，没什么能阻止你认真。老罗说的好：我尼玛不在乎输赢，我就是特么认真。
但是今年自己遇到很多事，总是不能安心，所以今天试着格式化自己，认真的写了这个以前让我蛋疼的插件。
DEMO:
调用方法：
<head> <script type="text/javascript" src="jq.js"></script> <script type="text/javascript" src="slide-image.js"></script> </head>
DOM结构：
<div id="slide-galleries-main"> <div id="slide-galleries-con"> <h1>组图：广州一大巴闹市行驶中自燃</h1> <ul id="slide-galleries-toolbar"> <li><a href="javascript:void(0);" id="slide-auto-play">自动播放</a>|</li> <li><a href="#11" id="slide-origin-url" target="_blank">查看图片</a>|</li> <li>提示：支持键盘翻页 ←左 右→</li> </ul> <div id="slide-image-wrap"> <div class="slide-btn slide-btn-prev"> <div class="slide-btn-bg-opacity"></div> <div class="slide-btn-arrow"><</div> </div> <img id="slide-image-change" src="1.jpg" /> <div class="slide-btn slide-btn-next"> <div class="slide-btn-bg-opacity"></div> <div class="slide-btn-arrow">></div> </div> <div id="loading-state">加载中</div> </div> <div id="slide-image-title"> <p>火情发生不过10分钟，6辆消防车就呼啸而至。经过约10分钟的扑救后，大火被扑灭。记者在下午2时50分到达现场，银色大巴烧得只剩框架，车内驾驶座烧得面目全非，车头玻璃全无。在烧焦客车的四周地面，可见零星的玻璃碎片。图为事发现场。柯皓 摄</p> <p class="date-time"><span>2012年11月12日09:16</span><span>文/广州日报</span><span>版权图片，请勿转载</span></p> </div> <div id="slide-list-view-wrap"> <div id="slide-box"> <ul> <li class="selected" data-origin="1.jpg"><img src="1-l.jpg" height="68" /><span>1/20</span></li> <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li> <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li> <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li> <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li> <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li> <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li> <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li> <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li> <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li> <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li> <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li> <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li> <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li> <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li> <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li> <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li> <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li> <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li> <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li> <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li> <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li> <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li> <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li> <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li> <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li> <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li> </ul> <div id="slide-selected-frame"></div> </div> <div class="slide-list-btn slide-list-btn-prev"><</div> <div class="slide-list-btn slide-list-btn-next">></div> <div id="scrollbar-track"> <div class="scrollbar-handle"></div> </div> </div> </div> </div>
CSS样式,可以自定义更改：
#slide-galleries-main{ margin-top:20px;border-top:1px solid #333;font-size:12px;color:#9A9A9A;} #slide-galleries-main a{color:#9A9A9A;text-decoration:none;} #slide-galleries-con{width:1000px; margin:0 auto;padding:20px 0;} #slide-galleries-con h1{color:#fff;font-size:26px; text-align:center;} #slide-galleries-toolbar{height:20px; margin:30px 0 10px;} #slide-galleries-toolbar li{float:left; margin-right:10px;} #slide-galleries-toolbar li a{ margin-right:10px;color:#ccc;} #slide-image-wrap{position:relative; text-align:center;} #slide-image-wrap .slide-btn{width:50%;height:100%; position:absolute;top:0;cursor:pointer;} #slide-image-wrap .slide-btn-prev{left:0;} #slide-image-wrap .slide-btn-next{right:0;} #slide-image-wrap .slide-btn .slide-btn-bg-opacity{width:100%;height:100%; background:#000;opacity:0;filter:alpha(opacity:0);} #slide-image-wrap .slide-btn .slide-btn-arrow{width:100px;height:100px; text-align:center;line-height:105px; background:#131313; position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-50px;opacity:0.7;filter:alpha(opacity:70);color:#fff;font-size:100px;border-radius:20px; display:none;} #slide-image-wrap .slide-btn-next .slide-btn-arrow{margin-left:50px;} #slide-image-wrap .slide-btn:hover .slide-btn-arrow{ display:block;} #slide-image-title p{width:950px; margin:20px auto; line-height:180%;} #slide-image-title p.date-time{ text-align:right;} #slide-list-view-wrap{height:155px;border:1px solid #333; position:relative;} #loading-state{width:80px;height:40px; line-height:40px; text-align:center;color:#fff; background:#000;border-radius:10px; position:absolute;left:50%;top:50%;margin-left:-40px;margin-top:-20px;opacity:0.8;filter:alpha(opacity=80); display:none;} #slide-box{width:872px;height:76px; position:relative;overflow:hidden; margin:20px auto;} #slide-box ul{height:68px;margin-top:3px;} #slide-box ul li{ float:left;width:116px; text-align:center; margin-right:10px; position:relative; cursor:pointer;} #slide-box ul li span{ position:absolute;bottom:0px;right:0; background:#000;color:#fff;} #slide-list-view-wrap .slide-list-btn{width:20px;height:60px; cursor:pointer;text-align:center;line-height:60px;color:#fff;font-size:24px;border:1px solid #333; position:absolute;left:15px;top:24px;border-radius:5px; background:#333;opacity:0.5;filter:alpha(opacity=50);} #slide-list-view-wrap .slide-list-btn-next{left:auto;right:15px;} #slide-list-view-wrap .slide-list-btn:hover{ background:#666;} #scrollbar-track{width:950px;height:10px; border-bottom:1px solid #333; margin:0 auto;} #scrollbar-track .scrollbar-handle{width:100px;height:10px;border-radius:5px; position:relative;top:5px; background:#333;} #scrollbar-track .scrollbar-handle:hover{ background:#666;} #slide-selected-frame{ position:absolute;left:0;top:0;height:68px;width:113px;border:3px solid orange;}
基于JQ的js代码：
(function(){ /** @幻灯片预览插件 @版权：杨永 @2014-8-14 @模仿腾讯图片查看控件 */ function SildeImage(slide){ var _this_=this; this.slide=slide; //保存幻灯片主图 this.slideMainImage=$("#slide-image-change",slide); //保存小图列表和父节点 this.slideBox=$("#slide-box ul",slide); this.imagesList=$("li",this.slideBox); this.imagesSize=this.imagesList.size(); //保存加载提示 this.loadingState=$("#loading-state",slide); //alert(this.imagesSize); //如果小图列表大于7个，就启动滑块 if(this.imagesSize>=7){ if(this.imagesSize!=7){ //获取滑道和滑块和滑道的偏移 this.slideTrack=$("#scrollbar-track",slide); this.sliderHandle=$(".scrollbar-handle",slide); //获取滑道和滑块的差 this.trackAndHandleWidth=this.slideTrack.width()-this.sliderHandle.width(); //注册事件 this.sliderHandle.mousedown(function(e){ //隐藏掉框选 _this_.slideSelectedFrame.fadeOut(); //获取鼠标相对于自身的偏移 _this_.layerX=e.pageX-$(this).offset().left; //注册document事件() $(document).bind("mousemove",function(e){_this_.mouseMove(e);}); $(document).bind("mouseup",function(){_this_.cancelEvents();});; }); //获得小图隐藏部分的宽度 this.imagesHideWidth=this.imagesSize*126-this.slideBox.parent().width()-10; }; //设置小图列表的宽度 this.slideBox.width(this.imagesSize*126); }; //保存框选对象 this.slideSelectedFrame=$("#slide-selected-frame",slide); //绑定小图事件 this.imagesList.click(function(){ _this_.goto(this); }); //保存上下切换按钮和计数器 this.loop=0; this.slideListBtnPrev=$(".slide-list-btn-prev",slide); this.slideListBtnNext=$(".slide-list-btn-next",slide); this.slideListBtnPrev.click(function(){ _this_.loop--; if(_this_.loop<0){ _this_.loop=_this_.imagesSize-1; }; _this_.imagesList.eq(_this_.loop).click(); }); this.slideListBtnNext.click(function(){ _this_.loop++; if(_this_.loop>_this_.imagesSize-1){ _this_.loop=0; }; _this_.imagesList.eq(_this_.loop).click(); }); //保存大图切换按钮 this.slideBtnPrev=$(".slide-btn-prev",slide); this.slideBtnNext=$(".slide-btn-next",slide); this.slideBtnPrev.click(function(){ _this_.slideListBtnPrev.click(); }); this.slideBtnNext.click(function(){ _this_.slideListBtnNext.click(); }); //绑定翻页按钮 $(document).keyup(function(e){ if(e.which==37){ _this_.slideListBtnPrev.click(); }; }); $(document).keyup(function(e){ if(e.which==39){ _this_.slideListBtnNext.click(); }; }); //保存查看图片按钮 this.viewBigImg=$("#slide-origin-url",slide); //当页面发生刷新时，定位到锚点当前图片 this.reloadPageInto(); //定义一个自动播放定时器和自动播放的按钮 this.timer=null; this.autoPlayBtn=$("#slide-auto-play",slide); this.autoPlayBtn.click(function(){ if(!this.isAuto){ _this_.autoPlay(); this.isAuto=true; $(this).text("暂停播放"); }else{ window.clearInterval(_this_.timer); this.isAuto=false; $(this).text("自动播放"); }; }); }; SildeImage.prototype={ changeBigImg:function(target){ var _this=this; var url=$(target).attr("data-origin"); this.loadingState.show(); //加载大图 this.preLoadImg(url,function(){ _this.slideMainImage.attr("src",url); _this.loadingState.fadeOut(); }); }, preLoadImg:function(url,callBack){ var img=new Image(); if(!!window.ActiveXObject){ img.onreadystatechange=function(){ if(this.readyState=="complete"){ callBack(); }; }; }else{ img.onload=function(){ callBack(); }; }; img.src=url; }, //自动播放幻灯片 autoPlay:function(){ var _this=this; this.timer=window.setInterval(function(){ _this.slideBtnNext.click(); },5000); }, reloadPageInto:function(){ var url=window.location.href, url=url.split("#")[1]||"page1", pageIndex=parseInt(url.substr(4)); this.imagesList.eq(pageIndex-1).click(); //设置计数器 this.loop=pageIndex-1; }, goto:function(target){ var index=$(target).index(); //切换选中状态 this.imagesList.eq(index).addClass("selected").siblings().removeClass("selected"); this.loop=index; //设置锚点 var url=window.location.href.split("#")[0]; window.location.href=url+"#page"+(index+1); //显示框选 if(this.slideSelectedFrame.is(":hidden")){ this.slideSelectedFrame.fadeIn(); }; //设置查看原图href this.viewBigImg.attr("href",this.imagesList.eq(index).attr("data-origin")); //切换图片 this.changeBigImg(target); if(this.imagesSize<=7){ if(index==6){ this.slideSelectedFrame.animate({"left":index*126-3}); }else{ this.slideSelectedFrame.animate({"left":index*126}); }; }else{ if(index<=3){ this.slideSelectedFrame.animate({"left":index*126}); this.slideBox.animate({marginLeft:0}); if(this.sliderHandle){ this.sliderHandle.animate({marginLeft:0}); }; }else if(index>3&&index<this.imagesSize-3){ this.slideSelectedFrame.animate({"left":3*126}); this.slideBox.animate({marginLeft:-(index-3)*126}); var bili=(index-3)*126/this.imagesHideWidth; this.sliderHandle.animate({marginLeft:bili*this.trackAndHandleWidth}); }else{ if(index==this.imagesSize-1){ this.slideSelectedFrame.animate({"left":(7-(this.imagesSize-index))*126-3}); }else{ this.slideSelectedFrame.animate({"left":(7-(this.imagesSize-index))*126}); }; this.slideBox.animate({marginLeft:-(this.imagesSize-7)*126}); this.sliderHandle.animate({marginLeft:this.trackAndHandleWidth}); }; }; }, mouseMove:function(e){ var moveLayerX=e.pageX-this.slideTrack.offset().left-this.layerX; moveLayerX=moveLayerX<0?0:moveLayerX>this.trackAndHandleWidth?this.trackAndHandleWidth:moveLayerX; //设置滑块的位置 this.sliderHandle.css("marginLeft",moveLayerX); //设置隐藏部分的位置 this.slideBox.css("marginLeft",-((moveLayerX/this.trackAndHandleWidth).toFixed(3)*this.imagesHideWidth)); }, cancelEvents:function(){ $(document).unbind("mousemove"); $(document).unbind("mouseup"); //检测鼠标抬起后移动列表位置 var i=Math.round(Math.abs(parseInt(this.slideBox.css("marginLeft"))/116))>this.imagesSize-7?this.imagesSize-7:Math.round(Math.abs(parseInt(this.slideBox.css("marginLeft"))/116)); this.slideBox.animate({marginLeft:-i*126}); //设置滑块的移动 var bili=i*126/this.imagesHideWidth; this.sliderHandle.animate({marginLeft:bili*this.trackAndHandleWidth}); } }; window["SildeImage"]=SildeImage; })();
创建方式：
var sildeImage=new SildeImage($("#slide-galleries-main"));
使用时有任何问题加我Q:377746756
