幻燈片1---圖片切換---遞歸的使用

時間 2019-11-18
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    /*初始化*/
        div,ul,li,a,em,img,body{margin:0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none; color: #fff;}
        img{border: none;vertical-align: top}
        body{font-size: 14px;}
    /*主體部分*/
        #box{width:200px;height: 200px;margin: 0 auto;overflow: hidden;position: relative;}
       
 .left,.right{width: 20px; height: 24px;position: 
absolute;top:76px;background: url("images/icon.png") 
no-repeat;text-indent: -99em;overflow: hidden;}
        .left{left: 0;z-index: 5;}
        .right{right: 0;background-position:0 -24px;}
        .box_ul{width: 1000%;overflow: hidden;}
        .box_ul li{float: left;position: relative;}
       
 .box_ul li em{position: absolute;left:0;bottom: 0;width: 200px;height: 
24px;background: #e12020;opacity: 
0.54;filter:alpha(opacity=54);font-style: normal;line-height: 
24px;text-align: center;}

    </style>
</head>
<body>
    <div id="box">
        <a href="javascript:void (0)" style="display:none">左</a>
        <ul>
            <li>
                <a href="##"><img src="images/1.jpg" width="200" height="200"/><em>萌女孩1號</em></a>
            </li>
            <li>
                <a href="##"><img src="images/2.jpg" width="200" height="200"/><em>萌女孩2號</em></a>
            </li>
            <li>
                <a href="##"><img src="images/3.jpg" width="200" height="200"/><em>萌女孩3號</em></a>
            </li>
            <li>
                <a href="##"><img src="images/4.jpg" width="200" height="200"/><em>萌女孩4號</em></a>
            </li>
            <li>
                <a href="##"><img src="images/5.jpg" width="200" height="200"/><em>萌女孩5號</em></a>
            </li>
            <li>
                <a href="##"><img src="images/6.jpg" width="200" height="200"/><em>萌女孩6號</em></a>
            </li>
        </ul>
        <a href="javascript:void (0)" style="display: none">右</a>

    </div>
</body>
<script>
    var boxObj=document.getElementById("box");
    var aObj=boxObj.getElementsByTagName("a");
    var lisObj=boxObj.getElementsByTagName("li");
    var ulObj=boxObj.getElementsByTagName("ul")[0];
    var bool=true;//開關
    boxObj.onmouseenter=function()//當鼠標移進boxObj的時候出現
    {
        aObj[0].style.display="";
        aObj[aObj.length-1].style.display="";
        window.clearInterval(autoMove);
    };
    boxObj.onmouseleave= function ()//當鼠標移出boxObj的時候隱藏
    {
        aObj[0].style.display="none";
        aObj[aObj.length-1].style.display="none";
        autoMove=window.setInterval(function(){funRight(0)},3000);
    };
    var autoMove=window.setInterval(function(){funRight(0)},3000);//幻燈片
    aObj[aObj.length-1].onclick=function()//向右切換
    {
        if(bool)
        {
            bool=false;//開關關閉
        funRight(0);
        }
    };
    aObj[0].onclick=function()//向左切換
    {
        if(bool)
        {
            bool=false;//開關關閉
        funLeft(0)
        }
    };

    function funRight(num)
            {
                var w=boxObj.clientWidth;//200
                num+=2;//速度控制
                lisObj[0].style.marginLeft=-num+"px";
                if(num<=w)
                {
                   window.setTimeout(function(){funRight(num);},20);
                }
                else{

                   ulObj.appendChild(lisObj[0]);
                    lisObj[lisObj.length-1].style.marginLeft=0;
                    bool=true;//開關開啓
                }
            }
    function funLeft(num)
               {
                   var w=boxObj.clientWidth;//200
                   if(num==0)//保證一次向右移動過程，最後一個li在ul以前
                   {
                       ulObj.insertBefore(lisObj[lisObj.length-1],lisObj[0]);
                       lisObj[0].style.marginLeft=-w+"px";

                   }
                  if(num<=w)
                   {

                        lisObj[0].style.marginLeft=(-w+num)+"px";
                       window.setTimeout(function(){funLeft(num);},20);
                   }
                   else//向左移動結束
                   {
                       bool=true;//開關開啓
                   }
                   num+=2;
               }


</script>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。