JS + CSS 超漂亮切换效果
2012-10-27 01:27
295 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片幻灯切换</title> <style type="text/css"> * { 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:498px; height:268px; overflow:hidden; } #ibanner_pic {} #ibanner_pic a { position:absolute; top:0; display:block; width:498px; height:268px; 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; } </style> <script type="text/javascript"> 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<=picList.length; i++ ) { var spanList = '<span class="normal">'+i+'</span>'; SpanBox += spanList; } btnBox.innerHTML = SpanBox; $('ibanner').appendChild(btnBox); $('ibanner_btn').getElementsByTagName('span')[0].className = 'current'; for (var m=0; m<picList.length; 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 < final_x) { 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 < final_y) { 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.length; i++){ btnList[i].className='normal'; } } function picZ() { var picList = $('ibanner_pic').getElementsByTagName('a'); for (var i=0; i<picList.length; 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}; var btnList = $('ibanner_btn').getElementsByTagName('span'); var picList = $('ibanner_pic').getElementsByTagName('a'); if (picList.length==1) return; picList[0].style.zIndex='2'; for (var m=0; m<btnList.length; m++){ btnList[m].onmouseover = function() { for(var n=0; n<btnList.length; n++) { if (btnList .className == 'current') { var currentNum = n; } } classNormal(); picZ(); this.className='current'; picList[currentNum].style.zIndex='2'; var z = this.childNodes[0].nodeValue-1; picList[z].style.zIndex='3'; if (currentNum!=z){ picList[z].style.left='498px'; moveElement('picLi_'+z,0,0,10); } } } } setInterval('autoBanner()', 5000); function autoBanner() { if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return; var btnList = $('ibanner_btn').getElementsByTagName('span'); var picList = $('ibanner_pic').getElementsByTagName('a'); if (picList.length==1) return; for(var i=0; i<btnList.length; i++) { if (btnList[i].className == 'current') { var currentNum = i; } } if (currentNum==(picList.length-1) ){ classNormal(); picZ(); btnList[0].className='current'; picList[currentNum].style.zIndex='2'; picList[0].style.zIndex='3'; picList[0].style.left='498px'; moveElement('picLi_0',0,0,10); } else { classNormal(); picZ(); var nextNum = currentNum+1; btnList[nextNum].className='current'; picList[currentNum].style.zIndex='2'; picList[nextNum].style.zIndex='3'; picList[nextNum].style.left='498px'; moveElement('picLi_'+nextNum,0,0,10); } } addLoadEvent(addBtn); addLoadEvent(iBanner); </script> <script type="text/javascript"> window.onload = function () { var oLi = document.getElementById("tab").getElementsByTagName("li"); var oUl = document.getElementById("hcon").getElementsByTagName("ul"); for(var i = 0; i < oLi.length; i++) { oLi[i].index = i; oLi[i].onmouseover = function () { for(var n = 0; n < oLi.length; n++) oLi .className=""; this.className = "current"; for(var n = 0; n < oUl.length; n++) oUl .style.display = "none"; oUl[this.index].style.display = "block" } } } </script> </head> <body> <div id="ibanner"> <div id="ibanner_pic"> <a href="/jscss/"><img src="/jscss/demoimg/200904/a1.jpg" alt="" /></a> <a href="/sort/index.shtml"><img src="/jscss/demoimg/200904/a2.jpg" alt="" /></a> <a href="/other/lastupdate.shtml"><img src="/jscss/demoimg/200904/a3.jpg" alt="" /></a> <a href="/other/top100.shtml"><img src="/jscss/demoimg/200904/a4.jpg" alt="" /></a> </div> </div> <!--ibanner end--> </body> </html>
相关文章推荐
- JS+CSS打造腾讯网漂亮的带缩略图的图片幻灯切换效果
- JS + CSS 超漂亮切换效果
- CSS+JS实现很不错的文本切换效果,可做公告栏
- js+css tab菜单切换效果
- js+css打造的仿土豆网带缩略图的图片幻灯切换效果
- CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
- css图片切换效果代码[不用js]
- JS+CSS实现仿雅虎另类滑动门切换效果
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- 转:jquery实现tab切换效果及js css ajax推荐
- Js+css实现的一款漂亮宽屏图片切换代码
- JS+CSS实现滑动切换tab菜单效果
- swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css。
- HTML+CSS+JS实现banner横幅自动切换效果
- JS+CSS仿百度风云榜TAB标签切换效果
- JS + CSS 图片切换效果
- 用JS+CSS实现多种图片漂亮效果的代码
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- 超漂亮Js+css图片幻灯切换
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果