매우 아름다운 JS CSS 그림 슬라이드쇼 전환 효과입니다. 홈페이지에 사용하면 좋습니다. 각 그림은 마우스를 놓으면 자동으로 전환됩니다. FLASH의 스무딩 효과는 매우 상쾌합니다. 게다가 코드도 많지 않으며, 디버깅 및 호출에 편리합니다. 코드 복사 코드는 다음과 같습니다. <머리> 사진幻灯切换 <br>* { 여백:0; 패딩:0; } <br>본문 { 배경:#FFF; 색상:#333; 글꼴: 12px/1.6em Helvetica, Arial, sans-serif; } <br>h1, h2, h3, h4, h5, h6 { 글꼴 크기:1em; } <br>a { 색상:#0287CA; 텍스트 장식:없음; } <br>a:hover { 텍스트 장식:밑줄; } <br>ul, li { 목록 스타일:없음; } <br>fieldset, img { border:none; } <br>범례 { 디스플레이:없음; } <br>em, Strong, cite, th { 글꼴 스타일:normal; 글꼴 두께:일반; } <br>입력, 텍스트 영역, 선택, 버튼 { 글꼴:12px Helvetica, Arial, sans-serif; } <br>테이블 { border-collapse:collapse; } <br>html { 오버플로:-moz-scrollbars-vertical; } <br>#ibanner { 위치:상대적; 너비:650px; 높이:250px; 오버플로:숨김; 여백:20px 0 20px 300px; } <br>#ibanner_pic {} <br>#ibanner_pic a { 위치:절대; 상단:0; 표시:블록; 너비:650px; 높이:250px; 오버플로:숨김; } <br>#ibanner_btn { 위치:절대; Z-색인:9999; 오른쪽:5px; 하단:5px; 글꼴 두께:700; 글꼴 모음:Arial; } <br>#ibanner_btn 스팬 { 디스플레이:블록; 부동:왼쪽; 여백-왼쪽:4px; 패딩:0 5px; 배경:#000; 커서:포인터; } <br>#ibanner_btn .normal { 높이:20px; 여백 상단:8px; 테두리:1px 솔리드 #999; 색상:#999; 글꼴 크기:16px; 줄 높이:20px; } <br>#ibanner_btn .current { 높이:28px; 테두리:1px 솔리드 #FF5300; 색상:#FF5300; 글꼴 크기:28px; 줄 높이:28px; } <br> <br>function $(id) { return document.getElementById(id); } <br>function addLoadEvent(func){ <br>var oldonload = window.onload; <br>if (typeof window.onload != 'function') { <br>window.onload = func; <br>} else { <br>window.onload = function(){ <br>oldonload(); <br>펑크(); <br>} <br>} <br>} <br>function addBtn() { <br>if(!$('ibanner')||!$('ibanner_pic')) return; <br>var picList = $('ibanner_pic').getElementsByTagName('a'); <br>if(picList.length==0) return; <br>var btnBox = document.createElement('div'); <br>btnBox.setAttribute('id','ibanner_btn'); <br>var SpanBox =''; <br>for(var i=1; ivarspanList = '<span class="normal">' 나는 '</span>'; <br>SpanBox = 스팬리스트; <br>} <br>btnBox.innerHTML = SpanBox; <br>$('ibanner').appendChild(btnBox); <br>$('ibanner_btn').getElementsByTagName('span')[0].className = '현재'; <br>for (var m=0; m<picList.length; m ){ <BR>var attributeValue = 'picLi_' m <BR>picList[m].setAttribute('id',attributeValue); <BR>} <BR>} <BR>function moveElement(elementID,final_x,final_y,interval) { <BR>if (!document.getElementById) return false; <BR>if (!document.getElementById(elementID))가 false를 반환하는 경우; <BR>var elem = document.getElementById(elementID); <BR>if (elem.movement) { <BR>clearTimeout(elem.movement); <BR>} <BR>if (!elem.style.left) { <BR>elem.style.left = "0px"; <BR>} <BR>if (!elem.style.top) { <BR>elem.style.top = "0px"; <BR>} <BR>var xpos =parseInt(elem.style.left); <BR>var ypos =parseInt(elem.style.top); <BR>if (xpos == final_x && ypos == final_y) { <BR>moving = false; <BR>참을 반환합니다. <BR>} <BR>if (xpos < final_x) { <BR>var dist = Math.ceil((final_x - xpos)/10); <BR>xpos = xpos dist; <BR>} <BR>if (xpos > final_x) { <br>var dist = Math.ceil((xpos - final_x)/10); <br>xpos = xpos - 거리; <br>} <br>if (ypos < final_y) { <BR>var dist = Math.ceil((final_y - ypos)/10); <BR>ypos = ypos dist; <BR>} <BR>if (ypos > final_y) { <br>var dist = Math.ceil((ypos - final_y)/10); <br>ypos = ypos - 거리; <br>} <br>elem.style.left = xpos "px"; <br>elem.style.top = ypos "px"; <br>varpeat = "moveElement('" elementID "'," final_x "," final_y "," 간격 ")"; <br>elem.movement = setTimeout(반복, 간격); <br>} <br>function classNormal() { <br>var btnList = $('ibanner_btn').getElementsByTagName('span'); <br>for (var i=0; i<btnList.length; i ){ <BR>btnList[i].className='normal'; <BR>} <BR>} <BR>function picZ() { <BR>var picList = $('ibanner_pic').getElementsByTagName('a'); <BR>for (var i=0; i<picList.length; i ){ <BR>picList[i].style.zIndex='1'; <BR>} <BR>} <BR>var autoKey = false; <BR>function iBanner() { <BR>if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')) return; <BR>$('ibanner').onmouseover = function(){autoKey = true}; <BR>$('ibanner').onmouseout = function(){autoKey = false}; <br><br>var btnList = $('ibanner_btn').getElementsByTagName('span'); <BR>var picList = $('ibanner_pic').getElementsByTagName('a'); <BR>if (picList.length==1) return; <BR>picList[0].style.zIndex='2'; <BR>for(var m=0; m<btnList.length; m ){ <BR>btnList[m].onmouseover = function() { <BR>for(var n=0; n<btnList.length; n ) { <BR>if (btnList[n].className == '현재') { <BR>var currentNum = n; <BR>} <BR>} <BR>classNormal(); <BR>picZ(); <BR>this.className='현재'; <BR>picList[currentNum].style.zIndex='2'; <BR>var z = this.childNodes[0].nodeValue-1; <BR>picList[z].style.zIndex='3'; <BR>if (currentNum!=z){ <BR>picList[z].style.left='650px'; <BR>moveElement('picLi_' z,0,0,10); <BR>} <BR>} <BR>} <BR>} <BR>setInterval('autoBanner()', 5000); <BR>function autoBanner() { <BR>if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return; <BR>var btnList = $('ibanner_btn').getElementsByTagName('span'); <BR>var picList = $('ibanner_pic').getElementsByTagName('a'); <BR>if (picList.length==1) return; <BR>for(var i=0; i<btnList.length; i ) { <BR>if (btnList[i].className == 'current') { <BR>var currentNum = i; <BR>} <BR>} <BR>if (currentNum==(picList.length-1) ){ <BR>classNormal(); <BR>picZ(); <BR>btnList[0].className='현재'; <BR>picList[currentNum].style.zIndex='2'; <BR>picList[0].style.zIndex='3'; <BR>picList[0].style.left='650px'; <BR>moveElement('picLi_0',0,0,10); <BR>} else { <BR>classNormal(); <BR>picZ(); <BR>var nextNum = currentNum 1; <BR>btnList[nextNum].className='현재'; <BR>picList[currentNum].style.zIndex='2'; <BR>picList[nextNum].style.zIndex='3'; <BR>picList[nextNum].style.left='650px'; <BR>moveElement('picLi_' nextNum,0,0,10); <BR>} <BR>} <BR>addLoadEvent(addBtn); <BR>addLoadEvent(iBanner); <BR> <본문>
