非常漂亮的JS+CSS图片幻灯切换特效_javascript技巧

非常漂亮的JS+CSS图片幻灯切换特效，用在你的首页比较不错，宽屏图片格式，每张图片平滑飞入切换，鼠标放上自动切换，和FLASH的平滑效果差不多，视觉冲击效果很爽，而且代码也不多，调试调用都方便，建议关注一下哦!

复制代码 代码如下:

图片幻灯切换 * { margin:0; padding:0; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#0287CA; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } legend { display:none; } em, strong, cite, th { font-style:normal; font-weight:normal; } input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; } table { border-collapse:collapse; } html { overflow:-moz-scrollbars-vertical; } #ibanner { position:relative; width:650px; height:250px; overflow:hidden; margin:20px 0 20px 300px; } #ibanner_pic {} #ibanner_pic a { position:absolute; top:0; display:block; width:650px; height:250px; overflow:hidden; } #ibanner_btn { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; } #ibanner_btn span { display:block; float:left; margin-left:4px; padding:0 5px; background:#000; cursor:pointer; } #ibanner_btn .normal { height:20px; margin-top:8px; border:1px solid #999; color:#999; font-size:16px; line-height:20px; } #ibanner_btn .current { height:28px; border:1px solid #FF5300; color:#FF5300; font-size:28px; line-height: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(); func(); } } } 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; i var spanList = ' '+i+''; SpanBox += spanList; } btnBox.innerHTML = SpanBox; $('ibanner').appendChild(btnBox); $('ibanner_btn').getElementsByTagName('span')[0].className = 'current'; 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)) return 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) { moveing = false; return true; } 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 - dist; } 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 - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } 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技巧

Articles Liés