大图轮播的一种做法 

<!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:0px;
                padding:0px;}
            #container{
                width:500px;
                height:300px;
                /*border:1px solid black;*/
                position:relative;
                overflow:hidden}
            .btn{
                height:100%;
                width:30px;
                /*border:1px solid red;*/
                position:absolute;
                text-align:center;
                line-height:300px;
                font-size:40px;
                font-weight:900;
                color:red;
                opacity:0.3;
                transition:0.6s;
                z-index:999;
                background-color:#C6F;}
                
            .btn:hover{
                cursor:pointer;
                opacity:0.8;}
            #left-btn{
                left:0px;
                top:0px;}
            #right-btn{
                right:0px;
                top:0px;}
            #ad-container{
                width:2500px;
                height:300px;
                /*border:1px soid blue;*/
                position:relative;}
            .ad{
                width:500px;
                height:300px;
                float:left;
                text-align:center;
                line-height:300px;
                font-size:100px;
                font-family:"微软雅黑";}
        </style>
    </head>
    
    <body>
        <div id="container">
            <div class="btn" id="left-btn"><</div>
            <div class="btn" id="right-btn">></div>
            <div id="ad-container">
                <div class="ad" style="background-color:#0F6">1</div>
                <div class="ad" style="background-color:#09F">2</div>
                <div class="ad" style="background-color:#C99">3</div>
                <div class="ad" style="background-color:#606">4</div>
                <div class="ad" style="background-color:#C00">5</div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    var rightBtn=document.getElementById("right-btn");
    var leftBtn=document.getElementById("left-btn");
    var n=1;
    var m=1;
    var arr=new Array();
    rightBtn.onclick=function(){
        var x=window.setInterval("to_right()",20);
        arr.push(x);
        }
        function clear(){
            for(var i in arr){
                window.clearInterval(arr[i]);
                }
            }
    function to_right(){
        var adContainer=document.getElementById("ad-container");
        
        if(n==5){
            clear();
        }else if(adContainer.offsetLeft != n*(-500)){
        adContainer.style.marginLeft=adContainer.offsetLeft-25+"px";
        }else{
            n++;
            clear();
            }
        }
    var arr2=new Array();
    leftBtn.onclick=function(){
        var y=window.setInterval("to_left()",20);
        arr.push(y);
        }
        function clear2(){
            for(var i in arr){
                window.clearInterval(arr[i]);
                }
            }
    function to_left(){
        var adContainer=document.getElementById("ad-container");
        
        if(n==1){
            clear2();
        }else if(adContainer.offsetLeft != (n-2)*(-500)){
        adContainer.style.marginLeft=adContainer.offsetLeft+25+"px";
        }else{
            n--;
            clear2();
            }
        }
</script>

 

posted @ 2017-01-05 16:30  v斌v  阅读(141)  评论(0)    收藏  举报