多浏览器兼容自适应宽度焦点图案例
多浏览器兼容焦点图，可左右切换内容，图中的小白点表示当前焦点图的个数，当鼠标悬停在小白点上则自动切换到对应序号的焦点图页面，当焦点图失去焦点时，焦点图继续循环切换。
效果图
html模块
<html> <head> <meta http-equiv="x-ua-compatible" content="IE=9" > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>焦点图test</title> <link href="res/css/css.css" rel='stylesheet' type='text/css' /> <script src="res/js/slide.js" rel='stylesheet' type='text/javascript' defer="defer"></script> </head> <body> <div class="banner"> <div class="btn"> <a class="btn_left" href="javascript:changeImgleft();;" id="turnleft"></a> <a class="btn_right" href="javascript:changeImg();" id="turnright"></a> </div> <div class="view" id="imglist"> <a href="http://www.baidu.com" style="background-image:url(res/images/1.jpg)"></a> <a href="http://www.google.com" style="background-image:url(res/images/2.jpg)"></a> <a href="http://www.bozechina.com" style="background-image:url(res/images/3.jpg)"></a> <a href="http://www.123.com" style="background-image:url(res/images/4.jpg)"></a> </div> <div class="dot" id="dot" > <a href="javascript:void(0)" id="0" onmouseover="ding(this)" class="bluedot"></a> <a href="javascript:void(0)" id="1" onmouseover="ding(this)" class="normal"></a> <a href="javascript:void(0)" id="2" onmouseover="ding(this)" class="normal"></a> <a href="javascript:void(0)" id="3" onmouseover="ding(this)" class="normal"></a> </div> </div> </body> </html>
css模块
*{ margin:0px; padding:0px; } body{ height:100%; text-align:center; } .banner{ width:100%; height:400px; float:left; margin-top:30px; border:1px solid #E8E8FF; position:relative; } .banner .view{ width:100%; height:400px; overflow:hidden; } .banner .view a{ display:block; width:100%; height:400px; background-position:center; } .banner .btn a.btn_left{ display:block; width:11px; height:18px; background-image:url("../images/left.png"); position:absolute; top:200px; left:30%; } .banner .btn a.btn_left:hover{ background-image:url("../images/left_hover.png"); } .banner .btn a.btn_right{ display:block; width:11px; height:18px; background-image:url("../images/right.png"); position:absolute; top:200px; right:30%; } .banner .btn a.btn_right:hover{ background-image:url("../images/right_hover.png"); } .banner .dot{ height:5px; position:absolute; display:inline-block; bottom:30px; width:100%; } .banner .dot .normal{ display:block; width:5px; height:5px; float:left; background-image:url("../images/gray.png"); margin-right:20px; } .banner .dot a:hover{ background-image:url("../images/blue.png"); } .bluedot{ display:block; width:5px; height:5px; float:left; margin-right:20px; background-image:url("../images/blue.png"); }
js模块
var dot=document.getElementById("dot"); var dotlist=dot.getElementsByTagName('a'); /*控制图片定时切换*/ var piclist=new Array(); var linklist=new Array(); var alist=document.getElementById("imglist"); var imglist=alist.getElementsByTagName('a'); for(var i=0;i<imglist.length;i++){ piclist[i]=imglist[i].style.backgroundImage; linklist[i]=imglist[i].href; } var curIndex=0; var timeInterval=5000; var efunt; efunt=setInterval(changeImg,timeInterval); function changeImg(){ if (curIndex==piclist.length-1){ curIndex=0; }else{ curIndex+=1; } imglist[0].style.backgroundImage=piclist[curIndex]; imglist[0].href=linklist[curIndex]; for(var m=0;m<dotlist.length;m++){ if(m==curIndex){ dotlist[m].className='bluedot'; }else{ dotlist[m].className='normal'; } } } function changeImgleft(){ if (curIndex!=0){ curIndex-=1; }else{ curIndex=piclist.length-1; } imglist[0].style.backgroundImage=piclist[curIndex]; imglist[0].href=linklist[curIndex]; } /*控制图片左右切换*/ var turnleft=document.getElementById("turnleft"); var turnright=document.getElementById("turnright"); turnleft.onmouseover=function(){clearInterval(efunt)}; turnleft.onmouseout=function(){efunt=setInterval(changeImg,timeInterval)}; turnright.onmouseover=function(){clearInterval(efunt)}; turnright.onmouseout=function(){efunt=setInterval(changeImg,timeInterval);}; /*控制点点*/ var dotWidth=dot.clientWidth; var viewWidth=document.body.clientWidth; marginWidth=(viewWidth-dotWidth)/2; dot.style.marginLeft=marginWidth+"px"; function ding(k){ ddnum=k.id; clearInterval(efunt); imglist[0].style.backgroundImage=piclist[ddnum]; imglist[0].href=linklist[ddnum]; for(var m=0;m<dotlist.length;m++){ if(m==ddnum){ dotlist[m].className='bluedot'; }else{ dotlist[m].className='normal'; } } } document.getElementById("0").onmouseout=function(){efunt=setInterval(changeImg,timeInterval)}; document.getElementById("1").onmouseout=function(){efunt=setInterval(changeImg,timeInterval)}; document.getElementById("2").onmouseout=function(){efunt=setInterval(changeImg,timeInterval)}; document.getElementById("3").onmouseout=function(){efunt=setInterval(changeImg,timeInterval)}; window.onresize = function(){ var dotWidth=dot.clientWidth; var viewWidth=document.body.clientWidth; marginWidth=(viewWidth-dotWidth)/2; dot.style.marginLeft=marginWidth+"px"; };
tips:第一次写还有很多地方需要改善~望多多指教~^-^
