我们知道删除一个dom节点的时候索引就会发生了改变，甚至是错误，就算jq的ecah也无能为力，所以我们只能自己写个功能了
直接上代码把，不多说
<!DOCTYPE html> <html> <head> <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Add jQuery library --> <script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) --> <!-- <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script> --> <!-- Add fancyBox main JS and CSS files --> <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script> <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) --> <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" /> <!-- <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> --> <!-- Add Thumbnail helper (this is optional) --> <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" /> <!-- <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> --> <!-- Add Media helper (this is optional) --> <!-- <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> --> </head> <style> *{ margin:0; padding:0;} li{ list-style:none;} #div{ margin:20px; height:auto; auto; overflow:hidden; } #div div { height:30px; 30px; overflow:hidden; position:absolute; right:0px; top:0px; z-index:9; } #div .closs { position:absolute; left:-4px; top:-2px; } #ul1{ height:auto; auto; overflow:hidden; background:#ccc; } #div li{ position:relative; height:100px; 100px; float:left; margin:5px; } #div li > img{ height:100px; 100px; position:absolute; left:0px; top:0px; } #div li span{ position:absolute; left:0px; top:0px; opacity:0; filter:alpha(opacity=0); z-index:3; height:100px; 100px; background:red; } #makImg{ display:none; } </style> <body> <input type="button" id="but" value="添加图片"/> <div id="div"> <!--ul li img --> <ul id="ul1"> <!-- <li> <div > <img class = "closs" src="../source/fancybox_sprite.png" /> </div> <img class="main" src="1_b.jpg" /> <span class='makClick'>1</span> </li> <li> <div > <img class = "closs" src="../source/fancybox_sprite.png" /> </div> <img class="main" src="1_b.jpg" /> <span class='makClick'> </span> </li> <li> <div > <img class = "closs" src="../source/fancybox_sprite.png" /> </div> <img class="main" src="1_b.jpg" /> <span class='makClick'> </span> </li> <li> <div > <img class = "closs" src="../source/fancybox_sprite.png" /> </div> <img class="main" src="1_b.jpg" /> <span class='makClick'> </span> </li>--> </ul> </div> <div id='makImg'> <!--<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>--> </div> <script> $(document).ready(function() { $(".fancybox-effects-a").fancybox({ helpers: { title : { type : 'outside' }, overlay : { speedOut : 0 } } }); }); var Odiv = document.getElementById('div'), Obut = document.getElementById('but'); function getByClass(o_parentId, class_name){ var obj_arr = [ ], obj_s = o_parentId.getElementsByTagName("*"); for(var i = 0 , len = obj_s.length; i < len; i++){ if(obj_s[i].className == class_name){ obj_arr.push(obj_s[i]); } } return obj_arr; } var evnet_index = { setIndex : function(obj_arr){ for(var i = 0, len = obj_arr.length; i < len ;i++ ){ obj_arr[i].index = i; } }, getIndex : function(o_parent, event_type, class_name , fn){ var target_obj = new Object( ); o_parent['on'+event_type]= function( e ){ var ev = e || window.event, target = ev.target || ev.srcElement; if(target.className == class_name){ fn && fn({obj : target , index : target.index}); } } } } var add_remove_child = { RemoveChild : function (obj,index){ var nwe_obj = obj[0]; nwe_obj.parentNode.removeChild(obj[index]); }, AddMaxImg : function(src){ var a_obj = document.createElement('a'); a_obj.className = "fancybox-effects-a"; a_obj["data-fancybox-group"] = 'button'; a_obj.href = src; var img_obj = document.createElement('img'); img_obj.src = src; a_obj.appendChild(img_obj); return a_obj; }, AddUl : function ( ){ if(Odiv.getElementsByTagName('ul').length>=1){ return Odiv.getElementsByTagName('ul')[0]; }else{ var Oul = document.createElement('ul'); Odiv.appendChild(Oul); return Oul; } }, AddChild : function (src){ var Oli = document.createElement('li'); Oli_div = document.createElement('div'); Oli.appendChild(Oli_div); var Oli_div_img = document.createElement('img'); Oli_div_img.className = 'closs'; Oli_div_img.src = '../source/fancybox_sprite.png'; Oli_div.appendChild(Oli_div_img); var Oli_img = document.createElement('img'); Oli_img.src = src; Oli.appendChild(Oli_img); var Oli_span = document.createElement('span'); Oli_span.style.zIndex = 3; Oli_span.className = 'makClick'; Oli.appendChild(Oli_span); return Oli; } }; var img_index = 0; Obut.onclick = function( ){ img_index = (img_index < 5)?(img_index+1):1; document.getElementById('makImg').appendChild(add_remove_child.AddMaxImg(img_index+'_b.jpg')); add_remove_child.AddUl( ).appendChild(add_remove_child.AddChild( img_index+'_b.jpg')); evnet_index.setIndex(getByClass(Odiv, 'makClick')); evnet_index.setIndex(getByClass(Odiv, 'closs')); } //事件所有的子对象只能绑定一个父对象，不能多个类的子对象绑定相同的父对象。 evnet_index.setIndex(getByClass(Odiv, 'makClick')); evnet_index.getIndex(document.getElementById('div'), 'click' ,'makClick' , function(obj){ ; alert(obj.index); $('.fancybox-effects-a').eq(obj.index).trigger('click'); }); //事件所有的子对象只能绑定一个父对象，不能多个类的子对象绑定相同的父对象。 evnet_index.setIndex(getByClass(Odiv, 'closs')); evnet_index.getIndex(document.getElementById('ul1'), 'click' ,'closs' , function(obj){ img_index--; add_remove_child.RemoveChild(document.getElementById('makImg').getElementsByTagName('a'),obj.index); add_remove_child.RemoveChild(document.getElementById('ul1').getElementsByTagName('li'),obj.index); evnet_index.setIndex(getByClass(Odiv, 'makClick')); evnet_index.setIndex(getByClass(Odiv, 'closs')); alert(obj.index); }); </script> </body> </html>