多浏览器兼容自适应宽度焦点图案例

Posted 2020-06-23 joesmile

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多浏览器兼容自适应宽度焦点图案例相关的知识，希望对你有一定的参考价值。


效果图





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:第一次写还有很多地方需要改善~望多多指教~^-^

以上是关于多浏览器兼容自适应宽度焦点图案例的主要内容，如果未能解决你的问题，请参考以下文章