移動web——輪播圖

阿新 • • 發佈：2018-01-15

title con cto ttr ati ann lock enter alt

1、我們將5張圖片又前後各增加一張，第一張前增加的是原本的第五張，第五張後增加的是原本的第一張，增加的原因無非是手指滑動的時候有輪播效果，這不像以前的輪播圖，點擊圖標就能立刻將ul跳轉到指定位置，手機滑動不行

2、當我們手指從第一張向右邊方向滑動時，會出現第五張圖片，在這個滑動效果結束之後我們跳轉到倒數第二張，其實也是第五張；當我們手指從倒數第二張圖片向左滑動時，會出現第一張，等這個滑動效果結束之後我們跳轉到第二張圖片，其實也是第一張圖；這裏我們必須借助transitionEnd事件

3、手指的滑動的動漫效果的transition事件最好小於定時器圖片中的transition時間

4、保險起見，在手指滑動時，需要校驗index值，以觸發滑動事件的target來進行判斷

5、為了在手指滑動的時候立刻響應，小圖標在滑動的時候會根據變化了的index值立刻變化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        * {
            padding 
: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .clearfix::before, .clearfix::after {
            content: ‘‘;
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }

        html, body  
{
            width: 100%;
            height: 100%;
            background-color: #c3c3c3;
        }

        .banner {
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .banner ul:nth-child(1) {
            list-style: none;
            width: 700%;
            transform: translateX(-14.28571%);
        }

        .banner ul:nth-child(1) li {
            float: left;
            width: 14.28571%;
            height: 200px;
        }

        .banner ul:nth-child(1) li a {
            width: 100%;
            height: 100%;
            text-decoration: none;
        }

        .banner ul:nth-child(1) li div {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: black;
        }

        .banner ul:nth-child(2) {
            list-style: none;
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -55px;
        }

        .banner ul:nth-child(2) li {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin-left: 10px;
        }

        .yellow {
            background-color: yellow;
        }

        .pink {
            background-color: pink;
        }

        .current {
            background-color: #fff;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="banner">
    <ul class="clearfix">
        <li>
            <a href="#">
                <div class="pink" biao=5>5-</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="yellow" biao=1>1</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="pink" biao=2>2</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="yellow" biao=3>3</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="blue" biao=4>4</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="pink" biao=5>5</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="yellow" biao=1>1-</div>
            </a>
        </li>
    </ul>
    <ul>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var banner = document.querySelector(‘.banner‘);
    var moveWidth = banner.offsetWidth;
    var ulLunBo = banner.querySelector(‘ul:nth-child(1)‘);
    var circleArr = banner.querySelectorAll(‘ul:nth-child(2) li‘);
    var moveDistance = 0;
    var index = 0;
    function animation() {
        ulLunBo.style.transition = ‘all .6s‘;
        index++;
        moveDistance = -moveWidth * index;
        ulLunBo.style.transform = ‘translateX(‘ + moveDistance + ‘px)‘;
        console.log(index + ‘==‘ + moveDistance);

        //小圓點根據index發生變化

        for (var i = 0; i < circleArr.length; i++) {
            circleArr[i].className = ‘‘;
        }
        if (index > 5) {
            circleArr[0].className = ‘current‘;
            return;
        }
        if (index < 1) {
            circleArr[5].className = ‘current‘;
            return;
        }
        circleArr[index - 1].className = ‘current‘;
    }

    var timer = setInterval(animation, 1000);
    ulLunBo.addEventListener(‘webkitTransitionEnd‘, function () {
        if (index > 5) {
            index = 1;
        } else if (index < 1) {
            index = 5;
        }
        circleArr[index - 1].className = ‘current‘;
        ulLunBo.style.transition = ‘‘;
        moveDistance = -moveWidth * index;
        ulLunBo.style.transform = ‘translateX(‘ + moveDistance + ‘px)‘;
    });

    var startX = 0;
    var moveX = 0;
    var distance = 0;
    var freeMove = 0;
    ulLunBo.addEventListener(‘touchstart‘, function (e) {
        clearInterval(timer);
        distance = moveDistance;
        ulLunBo.style.transition = ‘‘;
        startX = e.touches[0].clientX;
    })
    ulLunBo.addEventListener(‘touchmove‘, function (e) {
        moveX = e.touches[0].clientX - startX;
        freeMove = distance + moveX;
        ulLunBo.style.transform = ‘translateX(‘ + freeMove + ‘px)‘;
    })
    //吸附效果是重點
    //1、當自由移動距離freeMove的絕對值與清除定時器前的moveDistance的絕對值進行比較的cha值進行判斷
    //2、cha值小於moveWidth的一半在touchend的事件中需要歸位到moveDistance的位置
    //3、cha值大於moveWidth的一半在touchend的事件中需要根據cha值的正負情況向左或者向右前進1個moveWidth
    //4、根據第三步，我們還需要將index的值進行改變，因為我們最終移動了ulLunBo的位置
    var triggerValue = null;
    ulLunBo.addEventListener(‘touchend‘, function (e) {
            ulLunBo.style.transition = ‘all .3s‘;
            triggerValue = e.target.getAttribute(‘biao‘);
            var cha = Math.abs(freeMove) - Math.abs(moveDistance);
            if (cha >= moveWidth / 2) {
                //左邊移動距離大於寬度的一半
                moveDistance -= moveWidth;
                index = parseInt(triggerValue) + 1;
            } else if (cha <= (-moveWidth / 2)) {
                //右邊移動距離大於寬度的一半
                moveDistance += moveWidth;
                index = parseInt(triggerValue) - 1;
            } else {
                //向左向右移動距離小於寬度的一半
                moveDistance = moveDistance;
            }
            if (index > 5) {
                index = 1;
            } else if (index < 1) {
                index = 5;
            }
            for (var i = 0; i < circleArr.length; i++) {
                circleArr[i].className = ‘‘;
            }
            circleArr[index - 1].className = ‘current‘;
            ulLunBo.style.transform = ‘translateX(‘ + moveDistance + ‘px)‘;
            timer = setInterval(animation, 1000);
        }
    );
</script>
</body>
</html>

技術分享圖片

移動web——輪播圖

title con cto ttr ati ann lock enter alt 1、我們將5張圖片又前後各增加一張，第一張前增加的是原本的第五張，第五張後增加的是原本的第一張，增加的原因無非是手指滑動的時候有輪播效果，這不像以前的輪播圖，點擊圖標就能立刻將ul跳轉到指定位

移動web——輪播圖

移動web——輪播圖

JS實現某東移動web輪播圖

移動端輪播圖

移動端輪播圖實現

原生js實現簡單移動端輪播圖

原生js實現簡單的移動端輪播圖效果

實現移動端輪播圖

原生JS實現移動端輪播圖。

swipe 移動端輪播圖

利用swiper外掛實現移動端輪播圖

FlexSlider外掛的詳細設定引數（相容PC和移動的輪播圖）

vue移動音樂app開發學習（三）：輪播圖組件的開發

用原生JS 寫Web首頁輪播圖

web前端技術課程講解之關於輪播圖水平無縫滾動

zepto.min.js的使用移動端的輪播圖

原生JS相容移動端的輪播圖

Web前端模板（輪播圖排版）

vue 2.0 實戰移動音樂app（二）jsonp的應用+輪播圖資料的抓取

vue 2.0 實戰移動音樂app（三）輪播圖元件的實現

原生 js 實現移動端 Touch 輪播圖

移動web——輪播圖

相關推薦