實現簡單的輪播圖

時間 2019-11-09

標籤實現簡單简体版

原文原文鏈接

小練習3：輪播圖組件

任務描述
在和上一任務同一目錄下面建立一個task0002_3.html文件，在js目錄中建立task0002_3.js，並在其中編碼，實現一個輪播圖的功能。javascript

圖片數量及URL均在HTML中寫好css
能夠配置輪播的順序（正序、逆序）、是否循環、間隔時長html
圖片切換的動畫要流暢java
在輪播圖下方自動生成對應圖片的小點，點擊小點，輪播圖自動動畫切換到對應的圖片echarts
效果示例：http://echarts.baidu.com/ 上面的輪播圖（不須要作左右兩個箭頭）dom

實現原理：控制圖片的left值，把不須要的圖片進行hidden。函數

實現思路

考察對dom節點，定時器，事件的處理。優化

JS部分

第一步實現點擊切換動畫

獲取left //記得轉換成數字，向左移動減600，向右移動加600this
封裝animate 函數

/*
*進行輪播
*/
function animate(offset){
    var newleft = parseInt(list.style.left) + offset;
    list.style.left = newleft + 'px';
}

next.onclick = function(){
    animate(-600);
}
prev.onclick = function(){
    animate(600);
}

第二步實現無限輪播

實現：在第一張圖和最後一張圖都加上一張輪播的附屬圖片
進行判斷，當移動到附屬圖時，把list-style-left的值改成原圖，進行跳轉
改變小圓點位置
- 實現：設置一個index，每次移動時改變 index的值，把屬性設置爲「on」
- 若是大於5，則跳轉到1，若是小於1，則跳轉到5；

在原有代碼上添加

function animate(offset){
    var newleft = parseInt(list.style.left) + offset;
    list.style.left = newleft + 'px';
    if(newleft > -600){
        list.style.left = -3000+ 'px';
    }
    else if(newleft < -3000){
        list.style.left = -600 + 'px';
    }
}
next.onclick = function(){
    if(index==5){
        index = 1;
    }
    else{
        index+=1;
        
    }
    showButton();
    animate(-600);
}
prev.onclick = function(){
    if(index==1){
        index = 5;
    }
    else{
        index-=1;
    }
    showButton();
    animate(600);
}

第三步點擊小圓點切換

獲取自定義的index屬性 //getAttribute
算出偏移量 //offset=-600*（目標位置的Index - 當前的Index）

/*
*顯示小圓點
*/
function showButton(){
    for(var i = 0; i<buttons.length; i++){
        if(buttons[i].className== 'on'){
            buttons[i].className = '';
            break;
        }
    }
    buttons[index - 1].className = 'on';
}
/*
*點擊小圓點時，移動到相應圖片
*/
for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){
        if(this.className == 'on'){//進行優化，防止點在自己按鈕是執行代碼。
            return;
        }
        var myIndex = parseInt(this.getAttribute('index'));
        var offset = -600*(myIndex - index);
        animate(offset);
        index = myIndex;
        showButton();
        
    }
}

第四步自動轉換

相對應每隔一段時間去執行next.onclick
鼠標移動到圖片上是觸發。

/*
*進行自動播放
*/
function play(){
    timer = setInterval(function(){
        next.onclick();
    },3000);
}
/*
*中止自動播放
*/
function stop(){
    clearInterval(timer);
}
container.onmouseover = play;
            
container.onmouseout = stop;

簡單的輪播圖就完成了
附上完整代碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0px; padding: 0px; text-decoration: none;}
        body {padding: 20px;}
        #container {width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list {width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img {float: left;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons .on{background: #f0f;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #DDD; margin-right: 5px;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}

    </style>
    <script type="text/javascript">
        window.onload = function(){
            var container = document.getElementById('container');
            var list = document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index = 1;
            /*
            *顯示小圓點
            */
            function showButton(){
                for(var i = 0; i<buttons.length; i++){
                    if(buttons[i].className== 'on'){
                        buttons[i].className = '';
                        break;
                    }
                }
                buttons[index - 1].className = 'on';
            }
            /*
            *進行輪播
            */
            function animate(offset){
                var newleft = parseInt(list.style.left) + offset;
                list.style.left = newleft + 'px';
                if(newleft > -600){
                    list.style.left = -3000+ 'px';
                }
                else if(newleft < -3000){
                    list.style.left = -600 + 'px';
                }
            }

            next.onclick = function(){
                if(index==5){
                    index = 1;
                }
                else{
                    index+=1;
                    
                }
                showButton();
                animate(-600);
            }
            prev.onclick = function(){
                if(index==1){
                    index = 5;
                }
                else{
                    index-=1;
                }
                showButton();
                animate(600);
            }
            /*
            *進行自動播放
            */
            function play(){
                timer = setInterval(function(){
                    next.onclick();
                },3000);
            }
            /*
            *中止自動播放
            */
            function stop(){
                clearInterval(timer);
            }
            /*
            *點擊小圓點時，移動到相應圖片
            */
            for(var i = 0; i < buttons.length; i++){
                buttons[i].onclick = function(){
                    if(this.className == 'on'){//進行優化，防止點在自己按鈕是執行代碼。
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute('index'));
                    var offset = -600*(myIndex - index);
                    animate(offset);
                    index = myIndex;
                    showButton();
                    
                }
            }
            container.onmouseover = play;
            
            container.onmouseout = stop;

        }
    </script>
</head>
<body>
    <div id ="container">
        <div id="list" style="left:-600px;">
            <img src="http://p1.bpimg.com/567571/d663d99900769de2.jpg" alt="5">
            <img src="http://p1.bpimg.com/567571/94ff72e039660fe8.jpg" alt="1">
            <img src="http://p1.bpimg.com/567571/a419be5d821b989f.jpg" alt="2">
            <img src="http://p1.bpimg.com/567571/7bbc8903f85814d4.jpg" alt="3">
            <img src="http://p1.bpimg.com/567571/3f925d71cc93314f.jpg" alt="4">
            <img src="http://p1.bpimg.com/567571/d663d99900769de2.jpg" alt="5">
            <img src="http://p1.bpimg.com/567571/94ff72e039660fe8.jpg" alt="1">
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a> 
        <a href="javascript:;" id="next" class="arrow">&gt;</a> 
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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