純js輪播效果（減速效果）待改進

時間 2019-11-19

原文原文鏈接

HTML代碼css

<!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" />
<meta name="viewport" content="width=device-width,user-scalable=no" /><title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="js.js"></script>

</head>
<body>
<div class="z_box">
    <div id="move"></div>
</div>

<div id="z_body">
    <ul id="sImg">
        <li><img src="1.jpg" width="600" height="300" /></li>
        <li><img src="2.jpg" width="600" height="300" /></li>
        <li><img src="3.jpg" width="600" height="300" /></li>
        <li><img src="4.jpg" width="600" height="300" /></li>
        <li><img src="5.jpg" width="600" height="300" /></li>
        <li><img src="6.jpg" width="600" height="300" /></li>
    </ul>
    <span id="z_prev"></span>
    <span id="z_next"></span>
    <ul id="sNav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

</body>
</html>

CSS樣式html

*{
    margin:0px;
    padding:0px;
}
li{
    list-style:none;
}
.z_box{
    width:100%;
    height:100px;
    position:relative;
    left:50px;
    box-shadow:0px 0px 5px gray;
}
#move{
    width:100px;
    height:100px;
    position:absolute;
    box-shadow:0px 0px 5px blue;
    left:0px;
}
#z_body{
    width:600px;
    height:300px;
    margin:0 auto;
    overflow:hidden;
    box-shadow:0px 0px 5px black;
    position:relative;
}
#z_body ul#sImg{
    height:300px;
    position:absolute;
    z-index:665;
}
#z_body ul#sImg li{
    float:left;
    width:600px;
    height:300px;
    border:2px solid blue;
    
}
#z_prev{
    width:30px;
    height:30px;
    box-shadow:0px 0px 5px blue;
    display:block;
    position:absolute;
    left:10px;
    top:45%;
    z-index:666;
    cursor:pointer;
}
#z_next{
    width:30px;
    height:30px;
    box-shadow:0px 0px 5px blue;
    display:block;
    position:absolute;
    right:10px;
    top:45%;
    z-index:666;
    cursor:pointer;
}
#z_body span:hover{
    background:#eee;
    box-shadow:0px 0px 5px yellow;
}
#sNav{
    width:100%;
    height:30px;
    position:absolute;
    bottom:0px;
    left:0px;
    text-align:center;
    z-index:666;
}
#sNav li{
    display:inline;
    padding:2px 10px;
    box-shadow:0px 0px 5px red;
    margin-left:10px;
    cursor:pointer;
}
#sNav li:hover{
    background:white;
    box-shadow:0px 0px 5px blue;
}


.getWidth{
    width:100px;
    height:100px;
    border:1px solid red;
}

JS代碼函數

//
window.onload=function(){
    
    var oDiv=document.getElementById("move");
    var oDiv1=document.getElementById("z_body");
    var oUl=oDiv1.getElementsByTagName("ul");
    var oLi=oUl[0].getElementsByTagName("li");
    //左右按鈕初始化
    var oPrev=document.getElementById("z_prev");
    var oNext=document.getElementById("z_next");
    //小導航初始化
    var oNav=document.getElementById("sNav");
    var nLi=oNav.getElementsByTagName("li");
    //計算移動的距離
    var mWidth=oLi[0].offsetWidth;
    //當前索引值
    var k=0;
    //要用offsetWidth 否則在li上加入border會出現錯誤
    //oUl[0].style.width=parseInt((oLi[0],"width"))*oLi.length+"px"; 
    oUl[0].style.width=oLi[0].offsetWidth*oLi.length+"px";
    //初始化小按鈕當前樣式
    nLi[0].style.background="gray";
    function sMove(obj,iTarget,vSpeed){
        var speed=0;
        var timer=0;
        
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            speed=speed>0? Math.ceil((iTarget-obj.offsetLeft)/5):Math.floor((iTarget-obj.offsetLeft)/5);
            //if(obj.offsetLeft==iTarget){
            if(speed==0){
                clearInterval(obj.timer);
                console.log("中止運動!")
            }else{
                console.log("正在運動...");
                obj.style.left=obj.offsetLeft+speed+"px";
            }
            //給小按鈕添加當前選中樣式
            if(k<=nLi.length-1 && k!=0){    
                nLi[(k-1)].style.background="";
                nLi[k].style.background="gray";
            }else{
                nLi[nLi.length-1].style.background="";
                nLi[k].style.background="gray";
            }
        },vSpeed);
        
    }
    
    //自動切換函數
    function autoPlay(obj,innerTime,iTar){
        
        setTimeout(function(){
            
            if(k==oLi.length-1){
                k=0;
            }else{
                k++;
            }
            sMove(obj,-k*mWidth,25);
        },innerTime);
        
    }
    
    //開啓自動切換
    var iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);
    
    //左右按鈕事件
    oPrev.onclick=function(){
        if(k>0){
            sMove(oUl[0],-(k-1)*mWidth,25);
            k--;
        }else{
            k=oLi.length-1;
            sMove(oUl[0],-k*mWidth,25);
        }
        console.log("點擊按鈕後的k=="+k);
    };
    
    oNext.onclick=function(){
        if(k<oLi.length-1){
            sMove(oUl[0],-(k+1)*mWidth,25);
            k++;
        }else{
            sMove(oUl[0],-(0*mWidth),25);
            k=0;
        }
        console.log("點擊按鈕後的k=="+k);
        
    };
    
    //左右按鈕懸浮事件
    oNext.onmouseover=function(){
        clearInterval(iTimer);
    };
    oNext.onmouseout=function(){
        iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);
    };
    oPrev.onmouseover=function(){
        clearInterval(iTimer);
    };
    oPrev.onmouseout=function(){
        iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);
    };
    
    //鼠標懸浮小按鈕
    oNav.onmouseover=function(){
        clearInterval(iTimer);
    };
    oNav.onmouseout=function(){
        iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);
    };
    
    //小按鈕點擊事件
    for(var i=0;i<nLi.length;i++){
        nLi[i].index=i;
        nLi[i].onclick=function(){
            sMove(oUl[0],-this.index*mWidth,25);
            for(var j=0;j<nLi.length;j++){
                nLi[j].style.background="";
            }
            nLi[this.index].style.background="gray";
            k=this.index;
        };
    }
    
};


//獲取計算後的樣式
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr]; //IE
    }else{
        return getComputedStyle(obj,null)[attr];
    }
}

效果雖然已經完成可是還有不少地方須要改進望你們批評指教！ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。