매우 아름다운 JS CSS 그림 슬라이드쇼 전환 효과_javascript 기술

매우 아름다운 JS CSS 그림 슬라이드쇼 전환 효과입니다. 홈페이지에 사용하면 좋습니다. 각 그림은 마우스를 놓으면 자동으로 전환됩니다. FLASH의 스무딩 효과는 매우 상쾌합니다. 게다가 코드도 많지 않으며, 디버깅 및 호출에 편리합니다.

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

매우 아름다운 JS CSS 그림 슬라이드쇼 전환 효과_javascript 기술

관련 기사