非常漂亮的JS+CSS图片幻灯切换特效，用在你的首页比较不错，宽屏图片格式，每张图片平滑飞入切换，鼠标放上自动切换，和FLASH的平滑效果差不多，视觉冲击效果很爽，而且代码也不多，调试调用都方便，建议关注一下哦! 复制代码 代码如下: 图片幻灯切换 <BR>* { margin:0; padding:0; } <BR>body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } <BR>h1, h2, h3, h4, h5, h6 { font-size:1em; } <BR>a { color:#0287CA; text-decoration:none; } <BR>a:hover { text-decoration:underline; } <BR>ul, li { list-style:none; } <BR>fieldset, img { border:none; } <BR>legend { display:none; } <BR>em, strong, cite, th { font-style:normal; font-weight:normal; } <BR>input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; } <BR>table { border-collapse:collapse; } <BR>html { overflow:-moz-scrollbars-vertical; } <BR>#ibanner { position:relative; width:650px; height:250px; overflow:hidden; margin:20px 0 20px 300px; } <BR>#ibanner_pic {} <BR>#ibanner_pic a { position:absolute; top:0; display:block; width:650px; height:250px; overflow:hidden; } <BR>#ibanner_btn { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; } <BR>#ibanner_btn span { display:block; float:left; margin-left:4px; padding:0 5px; background:#000; cursor:pointer; } <BR>#ibanner_btn .normal { height:20px; margin-top:8px; border:1px solid #999; color:#999; font-size:16px; line-height:20px; } <BR>#ibanner_btn .current { height:28px; border:1px solid #FF5300; color:#FF5300; font-size:28px; line-height: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>func(); <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; i<=picList.length; i++ ) { <BR>var spanList = '<span class="normal">'+i+''; <BR>SpanBox += spanList; <BR>} <BR>btnBox.innerHTML = SpanBox; <BR>$('ibanner').appendChild(btnBox); <BR>$('ibanner_btn').getElementsByTagName('span')[0].className = 'current'; <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)) return 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>moveing = false; <BR>return true; <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 - dist; <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 - dist; <BR>} <BR>elem.style.left = xpos + "px"; <BR>elem.style.top = ypos + "px"; <BR>var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; <BR>elem.movement = setTimeout(repeat,interval); <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 == 'current') { <BR>var currentNum = n; <BR>} <BR>} <BR>classNormal(); <BR>picZ(); <BR>this.className='current'; <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='current'; <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='current'; <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>
