function openNew(){ //创建新的节点 var oMask = document.createElement("div"); oMask.id = "mask"; document.body.appendChild(oMask); /* *创建关闭按钮的新节点 */ var oImg = document.createElement("div"); oImg.id = "img"; oImg.innerHTML = "<div class='imgCon'><div id='close'>点击关闭</div></div>"; document.body.appendChild(oImg); //点击关闭按钮 var oClose = document.getElementById("close"); oClose.onclick = oMask.onclick = function(){ document.body.removeChild(oMask); document.body.removeChild(oImg); document.body.removeChild(oLimg); document.body.removeChild(oLeft); document.body.removeChild(oRight); } /* *创建遮罩层图片的新节点 */ var oLimg = document.createElement("div"); oLimg.id = "img"; oLimg.innerHTML = "<div id='number'><ul><li></li><li></li><li></li></ul></div>"; document.body.appendChild(oLimg); /* * 创建左边切图的新节点 */ var oLeft = document.createElement("div"); oLeft.id = "img"; oLeft.innerHTML = "<div id='left'><</div>"; document.body.appendChild(oLeft); /* * 创建右边切图的新节点 */ var oRight = document.createElement("div"); oRight.id = "img"; oRight.innerHTML = "<div id='right'>></div>"; document.body.appendChild(oRight); var abc = 1; var lis = document.getElementById("number").getElementsByTagName("li"); var ms = document.getElementById("img"); var addleft = document.getElementById("left"); var addright = document.getElementById("right"); var len = lis.length; //手动切换图片 addleft.onclick=function(){ abc=abc-1; if(abc<1){ abc=len; } ms.style.background="url('../images"+abc+".jpg')"; for (var i = 0; i < len; i++) { var x=abc-1; lis[i].style.background="blue"; if (x==i) { lis[i].style.background="yellow"; } } } addright.onclick=function(){ abc=abc+1; if(abc>len){ abc=1; } ms.style.background="url('../images"+abc+".jpg')"; for (var i = 0; i < len; i++) { var x=abc-1; lis[i].style.background="blue"; if (x==i) { lis[i].style.background="yellow"; } } } function show(){ lun = setInterval(function(){ abc = abc + 1; if (abc > len) { abc = 1; } ms.style.background = "url('../images"+abc+".jpg')"; var x = abc - 1; for (var i = 0; i <len; i++) { lis[i].style.background = "url('../images"+abc+".jpg')"; if(x == i){ lis[i].style.background = "url('../images"+abc+".jpg')"; } },2000); } show(); }
蜂之谷