幻灯片1---图片切换---递归的使用

最新推荐文章于 2024-10-18 00:00:00 发布

sas???

最新推荐文章于 2024-10-18 00:00:00 发布

阅读量91

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2421889/blog/487593

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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>

转载于:https://my.oschina.net/u/2421889/blog/487593