幻燈片2---總體滾動

時間 2019-11-18
標籤幻燈片總體滾動简体版
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*初始化*/
        body,div,a,ul,li,span{margin: 0;padding: 0;}
        li{list-style: none;}
        img{border: none;vertical-align: top;}
        a{text-decoration: none;}
        /*正文部分*/
        .flash{width: 900px;height: 460px;margin: 0 auto;position: relative;overflow: hidden;/*溢出隱藏*/}
        .flash_img{width: 300%;overflow: hidden/*清浮動*/}
        .flash_img li{float: left;}
        .flash_left,.flash_right{width: 113px;height: 113px;position: absolute;top: 185px;background: url("images/icon.png") no-repeat;text-indent: -99em;overflow: hidden;}
        .flash_left{left: 0;background-position: 0 -113px;}
        .flash_right{right: 0;}
        .flash_btn{width: 100%;height: 40px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99EAEAEA', endColorstr='#99EAEAEA');background:rgba(234,234,234,0.6);position: absolute;left: 0;bottom: 0;text-align: center;}/*須要用老師的那個網頁，本身設的話，會將透明度繼承給子元素*/
        .flash_btn span{display: inline-block;width: 10px;height: 10px;line-height: 100px;/*在行元素上偏移，爲兼容IE67，最好用行高偏移，不用text-indent=-99em*/margin-top: 17px;overflow: hidden;vertical-align: top;/*通常在行元素中使用*/background: #3f3f3f;}
        .flash_btn .flash_btnCur{background: #006dc7;}

    </style>
</head>
<body>
<div id="flash">
    <a id="flash_left" href="javascript:void (0)" style="display: none">左</a>
    <ul>
        <li><a href="##" target="_blank"><img src="images/1.jpg" alt="1" width=""/></a></li>
        <li><a href="##" target="_blank"><img src="images/2.jpg" alt="2"/></a></li>
        <li><a href="##" target="_blank"><img src="images/3.jpg" alt="3"/></a></li>
    </ul>
    <a id="flash_right" href="javascript:void (0)" style="display: none">右</a>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <!--[if IE 6]>
    <script type="text/javascript" language="javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>
    //如下是IE6要支持的png圖
    DD_belatedPNG.fix('.flash_left,.flash_right,background,img');
    </script>
    <![endif]-->
</div><!--IE6不支持png24的半透明效果-->
<script>
    var flashObj=document.getElementById("flash");
    var aLeft=document.getElementById("flash_left");
    var aRight=document.getElementById("flash_right");
    var ulObj=document.getElementsByTagName("ul")[0];
    var divObj=flashObj.getElementsByTagName("div");
    var spanObj=flashObj.getElementsByTagName("span");
    var setTimeDo;
    flashObj.onmouseenter=function()
    {
        window.clearInterval(setInr);//幻燈片效果清除
        aLeft.style.display="block";//顯示
        aRight.style.display="block";
    };

     var setInr=window.setInterval(function(){aRight.onclick();},3000);//幻燈片
    flashObj.onmouseleave=function()
    {
        aLeft.style.display="none";
        aRight.style.display="none";
        setInr=window.setInterval(function(){aRight.onclick();},3000);//幻燈片從新設置
    };

    for(var i=0;i<spanObj.length;i++)//下方小點部分
    {
        spanObj[i].index=i;
        spanObj[i].onmouseenter=function()
        {
            if(this.className=="flash_btnCur")
            return;//跳出循環

             var oldNode;//獲得原來的位置
             var newNode=this.index;//獲得新的位置
             window.clearTimeout(setTimeDo);
             for(var j=0;j<spanObj.length;j++)
             {//for循環就是爲了獲得原來的位置
                    if(spanObj[j].className=="flash_btnCur")
                    {
                    oldNode=j;
                    break;
                    }
             }
                    spanObj[oldNode].className="";
                    spanObj[newNode].className="flash_btnCur";
                    btn(newNode,oldNode);
        };
        aRight.onclick=function(){
            var oldNode;//獲得原來的位置
            var newNode;
            window.clearTimeout(setTimeDo);
            for(var j=0;j<spanObj.length;j++)
           {//for循環就是爲了獲得原來的位置
                if(spanObj[j].className=="flash_btnCur")
                {
                    oldNode=j;
                    break;
                }
           }
                 newNode=oldNode==spanObj.length-1?0:oldNode+1;
                 spanObj[oldNode].className="";
                 spanObj[newNode].className="flash_btnCur";


          btn(newNode,oldNode);
        };
        aLeft.onclick=function(){
             var oldNode;//獲得原來的位置
             var newNode;
             window.clearTimeout(setTimeDo);
             for(var j=0;j<spanObj.length;j++)
             {//for循環就是爲了獲得原來的位置
                   if(spanObj[j].className=="flash_btnCur")
                   {
                        oldNode=j;
                        break;
                   }
             }
                        newNode=oldNode==0?spanObj.length-1:oldNode-1;
                        spanObj[oldNode].className="";
                        spanObj[newNode].className="flash_btnCur";



                  btn(newNode,oldNode);

                }

    }
    function btn(newNode,oldNode)
    {
        var marginNum=parseInt(ulObj.style.marginLeft);//第一次獲得的時候是NaN，後來就不是了
        marginNum=isNaN(marginNum)?0:marginNum;
        var pos=-newNode*900;//須要移動的位置，是負值
        if(newNode>oldNode){
            marginNum-=30*Math.abs(newNode-oldNode);//爲了保證移動時間相同，取絕對值
            if(marginNum>=pos){
            ulObj.style.marginLeft=marginNum+"px";
            setTimeDo=window.setTimeout(function(){btn(newNode,oldNode);},15);
            }
        }
        else{
            marginNum+=30*Math.abs(newNode-oldNode);
            if(marginNum<=pos){
            ulObj.style.marginLeft=marginNum+"px";
            setTimeDo=window.setTimeout(function(){btn(newNode,oldNode);},15);
            }
        }
    }
</script>

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