14.js仿flash圖片輪播練習；

時間 2019-11-18

原文原文鏈接

經過getByClass獲取各所需元素；javascript

function getByClass(oParent,sClass){
var aEle=oParent.getElementsByTagName('*');
var arr=[];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className == sClass){
arr.push(aEle[i]);
}
}
return arr;
}java

編寫輪播運動大體步驟：框架

1，左右箭頭隱藏，顯示；函數

2，點擊小圖，設置now,當now等於小圖當前序號，用return阻止下面運動執行，若是不等於，使now等於當前序號，並使對應大圖z-index大於其他圖片，並高度變爲0，從上到下慢慢展示大圖（用startMove()緩衝運動框架）；this

3，for遍歷小圖，使每一張小圖的opacity都等於60；而後將當前小圖opacity設置爲100；spa

4，點擊小圖，小圖左右移動，用startMove函數，分3部分討論：當小圖是第一張時，小圖Ul左邊的距離爲0,；是最後一張時，左邊距離爲跟倒數第二張狀況同樣，其他小圖時，左邊距離是aLiSmall[0].offsetWidth*（now-1）+'px';2,3,4,三步可封裝成tab()函數，以便調用；(now爲當前小圖的序號)code

5，移入移出小圖透明度變化，移出時，this.index!=now.才改變opacity爲60；blog

6，左右按鈕移動小圖，分別用now--,now++控制小圖；seo

7var timer=setInterval(oBtnPrev.onclick,2000);自動播放，調用的是oBtnPrev.onclick函數；鼠標移入div運動中止清楚定時器，移出div運動繼續；圖片

JS:

<script>
function getByClass(oParent,sClass){
    var aEle=oParent.getElementsByTagName('*');
    var arr=[];
    for(var i=0;i<aEle.length;i++){
        if(aEle[i].className == sClass){
            arr.push(aEle[i]);
        }
    }
    return arr;
}
window.onload=function(){
    var oDiv=document.getElementById('playimages');
    
    var oBtnPrev=getByClass(oDiv,'prev')[0];
    var oBtnNext=getByClass(oDiv,'next')[0];
    var oALeft=getByClass(oDiv,'mark_left')[0];
    var oARight=getByClass(oDiv,'mark_right')[0];
    
    var oUlBig=getByClass(oDiv,'big_pic')[0];
    var aLiBig=oUlBig.getElementsByTagName('li');
    
    var oDivSmall=getByClass(oDiv,'small_pic')[0];
    var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
    var aLiSmall=oUlSmall.getElementsByTagName('li');
    
    
    var nowZIndex=2; 
    var now=0;
    
    oUlSmall.style.width=aLiSmall[0].offsetWidth*aLiSmall.length+'px';
    //左右按鈕隱藏出現；
    oBtnPrev.onmouseover=oALeft.onmouseover=function(){
        startMove(oBtnPrev,'opacity',100);
    }
    oBtnPrev.onmouseout=oALeft.onmouseout=function(){
        startMove(oBtnPrev,'opacity',0);
    }
    oBtnNext.onmouseover=oARight.onmouseover=function(){
        startMove(oBtnNext,'opacity',100);
    }
    oBtnNext.onmouseout=oARight.onmouseout=function(){
        startMove(oBtnNext,'opacity',0);
    }
    
    //點擊小圖，顯示大圖；
    for(var i=0;i<aLiSmall.length;i++)
    {
        aLiSmall[i].index=i;
        aLiSmall[i].onclick=function(){
            if(this.index==now)return;
            now=this.index;
            
            tab();
        }
        
        aLiSmall[i].onmouseover=function()
        {
                
                startMove(this,'opacity',100);
        }
        aLiSmall[i].onmouseout=function()
        {
                if(this.index != now){
                    startMove(this,'opacity',60);
                }
        }
    }
    
    //封裝大圖隨着小圖運動的函數；
    function tab(){
        //大圖刷新
            aLiBig[now].style.zIndex=nowZIndex++;    
            aLiBig[now].style.height=0;
            startMove(aLiBig[now],'height',320);
            
            //小圖透明度變化；
            for(var i=0;i<aLiSmall.length;i++)
            {
                startMove(aLiSmall[i],'opacity',60);
            }
            startMove(aLiSmall[now],'opacity',100);
            
            //小圖左右移動；
            if(now==0)
            {
                startMove(oUlSmall,'left',0);
            }else if(now == (aLiSmall.length-1))
            {
                startMove(oUlSmall,'left',-aLiSmall[0].offsetWidth*(now-2));
            }else
            {
                startMove(oUlSmall,'left',-aLiSmall[0].offsetWidth*(now-1));
            }
    }
    
    //左右箭頭移動小圖；
    oBtnPrev.onclick=function(){
        now--;
        if(now == -1){
            now=aLiSmall.length-1;
        }
        tab();
    }
    
    oBtnNext.onclick=function(){
        now++;
        if(now == aLiSmall.length){
            now=0;
        }
        tab();
    }
    
    //自動播放；
    var timer=setInterval(oBtnPrev.onclick,2000);
    
    //移入暫停播放，移出繼續；
    oDiv.onmouseover=function(){
        clearInterval(timer);
    }
    
    oDiv.onmouseout=function(){
        timer=setInterval(oBtnPrev.onclick,2000);
    }
}
</script>

HTML:

<body>
<div id="playimages" class="play">
    <ul class="big_pic">

        <div class="prev"></div>
        <div class="next"></div>

        <div class="text">加載圖片說明……</div>
        <div class="length">計算圖片數量……</div>
        
        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>
        <div class="bg"></div>
        
        <li style="z-index:1;"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
        <li><img src="images/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>

</body>

相關標籤/搜索

每日一句

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