렌더링:테스트 코드: <title>Js 이미지 브라우저</title> <button onclick="Slider.next()">놀이</button> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ] <!-- Slider = { isIE : true, m_imageSource : [], m_selIdx : 0, m_direction : 1, m_mainviewer : null, m_delayTimer : null, m_delayTimer1 : null, m_curObj : null, m_tarObj : null, m_inited : false, init : function(id, w, h, w1, h1, p, t, s, source){ this.isIE = document.all ? true : false; this.canvasWidth = w; this.canvasHeight = h; this.imageWidth = w1; this.imageHeight = h1; this.m_percent = p; this.m_top = t; this.m_spaceWidth = s; this.writeCanvas(id); for(var i=0;i<source.length;i++) { this.container.innerHTML += '<img src="'+source[i]+'" border="0" style="max-width:90%"filter:alpha(opacity=50)':'opacity:0.5')+';width:'+w1+'px;height:'+h1+'px;position:absolute;left:'+(i*w1+i*this.m_spaceWidth)+'px;top:'+this.m_top+'px;" index="'+i+'"/ alt="해외 JS 사진 검색 효과_이미지 특수 효과" >'; } this.m_mainviewer = this.container.firstChild.cloneNode(true); this.bind(); this.start(); }, writeCanvas : function(id) { document.write('<div id="'+id+'" style="width:'+this.canvasWidth+'px;height:'+this.canvasHeight+'px;position:relative;overflow:hidden;background-color:black">'); this.container = document.getElementById(id); }, bind : function(obj, evt, fun){ var obj = this.container; for(var i=0;i<obj.childNodes.length;i++) { this.attachEvent(this.container.childNodes[i], "mouseover", this.mouseover); this.attachEvent(this.container.childNodes[i], "mouseout" , this.mouseout); this.attachEvent(this.container.childNodes[i], "click" , this.click); } }, attachEvent : function(obj, evt, fun){ if (Slider.isIE) { obj.attachEvent("on"+evt, fun) }else { obj.addEventListener(evt, fun, false); } }, mouseover : function(e) { if(!e)e=window.event; var obj = e.srcElement || e.target; if (Slider.isIE) { obj.style.filter = "alpha(opacity=80)"; }else{ obj.style.opacity = "0.8"; } }, mouseout : function(e) { if(!e)e=window.event; var obj = e.srcElement || e.target; if (Slider.isIE) { obj.style.filter = "alpha(opacity=50)"; }else{ obj.style.opacity = "0.5"; } }, click : function(e) { if(!e)e=window.event; var obj = e.srcElement || e.target; var mobj = Slider.m_mainviewer; Slider.m_selIdx = obj.getAttribute("index"); Slider.m_curObj = Slider.m_mainviewer; Slider.m_tarObj = obj; Slider.m_delayTimer = Slider.fadeIn(200,5); }, start : function(){ var obj = this.m_mainviewer; if (Slider.isIE) { obj.style.filter = "alpha(opacity=100)"; }else{ obj.style.opacity = "1"; } this.container.appendChild(this.m_mainviewer); this.m_mainviewer.style.width = parseInt(this.m_mainviewer.style.width)*(1+this.m_percent)+"px"; this.m_mainviewer.style.height = parseInt(this.m_mainviewer.style.height)*(1+this.m_percent)+"px"; this.m_curObj = this.container.childNodes[this.m_selIdx]; this.m_tarObj = this.m_mainviewer; if(this.m_delayTimer)clearInterval(Slider.m_delayTimer); this.m_delayTimer = this.fadeIn(200,5); }, next : function(){ var obj = this.container; var mobj = this.m_mainviewer; if(this.m_selIdx == obj.childNodes.length-2) { this.m_direction = -1; } if(this.m_selIdx == 0) { this.m_direction = 1; } Slider.m_curObj = mobj; Slider.m_tarObj = obj.childNodes[this.m_selIdx]; this.m_delayTimer = this.fadeIn(200,5); mobj.src = obj.childNodes[this.m_selIdx].src; if(this.m_direction==-1){ this.m_selIdx --; }else{ this.m_selIdx ++; } }, fadeIn : function(aa, ab){ var obj = this.container; with(this.m_curObj.style){var t1 = parseInt(left);var t3 = parseInt(width);var t4 = parseInt(height);var t5 = parseInt(top);} if (Slider.m_inited) { var k1 = (t1 - (this.canvasWidth- parseInt(this.m_curObj.style.width))/2)/ab; var k3 = (t3-parseInt(this.m_tarObj.style.width))/ab; var k4 = (t4-parseInt(this.m_tarObj.style.height))/ab; var k5 = (t5 - parseInt(this.m_tarObj.style.top))/ab; }else{ var k1 = (t1 - (this.canvasWidth- this.imageWidth*(1+this.m_percent))/2)/ab; var k3 = (t3- this.imageWidth*(1+this.m_percent))/ab; var k4 = (t4 - this.imageHeight*(1+this.m_percent))/ab; var k5 = (this.imageHeight * this.m_percent/2)/ab; } var mobj = this.m_mainviewer; return setInterval(function(){if(ab<1){ clearInterval(Slider.m_delayTimer); if(Slider.m_inited){ if (!Slider.m_fadein) { Slider.m_curObj = obj.childNodes[Slider.m_selIdx]; Slider.m_tarObj = mobj; mobj.src = obj.childNodes[Slider.m_selIdx].src; Slider.m_fadein = true; Slider.m_inited = false; Slider.m_delayTimer = Slider.fadeIn(200,10); }else{ Slider.m_fadein = false; Slider.m_inited = true; } } Slider.m_inited = true; return; } ab--;t1-=k1;t3-=k3;t4-=k4;t5-=k5; if (Slider.m_fadein) { for(var i=0;i<obj.childNodes.length-1;i++) { obj.childNodes[i].style.left = (parseInt(t1) + (Slider.imageWidth + Slider.m_spaceWidth)*(i-Slider.m_selIdx))+"px"; } } with(mobj.style){left = t1 + "px";top = t5 + "px";width = t3 + "px";height = t4 + "px";} } ,aa/ab) } } Slider.init('aaa',400,600,180,100, 0.5, 200, 20, [ "http://files.jb51.net/demoimg/201005/r_s1.jpg", "http://files.jb51.net/demoimg/201005/r_s2.jpg", "http://files.jb51.net/demoimg/201005/r_s3.jpg", "http://files.jb51.net/demoimg/201005/r_s4.jpg", "http://files.jb51.net/demoimg/201005/r_s1.jpg", "http://files.jb51.net/demoimg/201005/r_s2.jpg", "http://files.jb51.net/demoimg/201005/r_s3.jpg", "http://files.jb51.net/demoimg/201005/r_s4.jpg" ]); //-->
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
