技術標籤：前端# 案例css3html5

概要

1. 功能概要
   1. 自動播放輪播圖
   2. 使用者手動滑動輪播圖
2. 涉及知識點
   1. 採用css3中transition實現動畫移動過渡效果以及transform實現動畫效果
   2. 採用h5中classList切換類的方式實現底部小圓圈同步變化效果
   3. 移動端touch觸屏事件
3. 效果預覽
   

實現程式碼

html

<!-- 輪播圖-->
<div class="focus">
    <ul>
        <li><img src="../imgs/OIP.jpg" alt="輪播圖片"></li>
        <li><img src="../imgs/green_bg.jpg" alt="輪播圖片"></li>
        <li><img src="../imgs/grils.png" alt="輪播圖片"></li>
        <li><img src="../imgs/OIP.jpg" alt="輪播圖片"></li>
        <li><img src="../imgs/green_bg.jpg" alt="輪播圖片"></li>
    </ul>
    <!-- 小圓點 -->
    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
    </ol>
</div>
 

css

.focus {
    position: relative;
    padding-top: 44px;
    overflow: hidden;
}

.focus img {
    width: 100%;
    height: 500px;
}

.focus ul {
    overflow: hidden;
    width: 500%;
    margin-left: -100%;
    padding: 0;
}

.focus ul li {
    float: left;
    width: 20%;
}

.focus ol {
    position: absolute;
    bottom: 30px;
    right: 35px;
    margin: 0;
}

.focus ol li {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #fff;
    list-style: none;
    border-radius: 2px;
    transition: all .3s;
}

.focus ol li.current {
    width: 35px;
}
 

js

window.addEventListener('pageshow',function () {
    // 1. 獲取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 2. 獲得focus寬度
    var w = focus.offsetWidth;
    // 3. 定時器自動播放輪播圖
    var index = 0;
    var timer = setInterval(funcTimer,2000)

    // 監聽過渡完成事件 只有過渡完成才能移動盒子
    ul.addEventListener('transitionend',function () {
    // 無縫滾動
        if (index >= 3) {
            index = 0;
        } else if(index < 0) {
            // 倒著拖拉
            index = 2;
        }
        var translateX = -index * w;
        // 去掉過渡時間 以便盒子快速跳到第一張
        this.style.transition = 'none';
        // 移動
        this.style.transform = 'translateX('+translateX+'px)';

    //  小圓圈跟著變化
    //  去掉帶有current類名的li標籤
        ol.querySelector('.current').classList.toggle('current');
    //  當前li加上current
        ol.querySelectorAll('li')[index].classList.add('current');
    })

    // 手指滑動輪播圖
    var startX = 0;
    var moveX = 0;
    // 判斷使用者是否只是觸摸了螢幕
    var flag = false;
    ul.addEventListener('touchstart',function (e) {
        // 獲取手指最開始的位置
        startX = e.targetTouches[0].pageX;
        // 停止計時器
        clearInterval(timer);
    })
    ul.addEventListener('touchmove',function (e) {
        // 停止計時器
        clearInterval(timer);
        // 計算手指移動的距離
        moveX = e.targetTouches[0].pageX - startX;
        // 清除過渡
        this.style.transition = 'none';
        // 計算盒子移動距離
        var translateX = -index * w + moveX;
        // 移動盒子
        this.style.transform = 'translateX('+translateX+'px)';
        // 使用者滑動了螢幕
        flag = true;
        // 阻止滾動螢幕的預設行為
        e.preventDefault();
    })


    // 手指離開輪播圖 根據移動距離判斷播放上一張/下一張/回彈
    ul.addEventListener('touchend',function () {
        // 如果flag = true 表明使用者滑動了輪播圖  才去判斷移動距離 避免不必要的計算
        if (flag) {
            if (Math.abs(moveX) > 100) {
                index = moveX > 0? index - 1: index +1;
            }
            // 如果不大於100畫素 則不做任何操作 使其回彈
            this.style.transition = 'all .3s';
            // 計算盒子移動距離
            var translateX = -index * w;
            // 移動盒子
            this.style.transform = 'translateX('+translateX+'px)';
        }
        // 開啟定時器
        clearInterval(timer); // 關閉多餘的定時器
        timer = setInterval(funcTimer,2000);
        // 重置
        flag = false;
    })

    // 定時器執行函式
function funcTimer() {
    index++;
    var translateX = -index * w;
    // 新增過渡效果
    ul.style.transition = 'all .3s';
    // 在x上移動
    ul.style.transform = 'translateX(' + translateX + 'px)';
}
})