カルーセル図ケース

目的関数

ここに画像を挿入説明

モジュールのロールオーバーカルーセルビュー、左と右のボタンは、隠された左右のボタンを左
一度右ボタンをクリックして、画像が再生するには、左、というように、左ボタンの共感
写真は、再生と同時に、次のモジュールが一緒に小さな円で変化を追跡します
小さな円をクリックして、あなたは、対応する画像を再生することができます
カルーセルビューカルーセル図のないマウスは、静止画を自動再生されます
ロールオーバー、カルーセルマップモジュール、ストップ自動再生

test.htmlという

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/test.css">
  <script src="./js/test.js"></script>
  <!-- 导入动画函数 -->
  <script src="./js/animate.js"></script>
</head>

<body>
  <div class="wrapper">
    <!-- 让ul移动，实现轮播图效果 -->
    <ul>
      <li>
        <img src="./img/focus0.jpg" alt="">
      </li>
      <li>
        <img src="./img/focus1.jpg" alt="">
      </li>
      <li>
        <img src="./img/focus2.jpg" alt="">
      </li>
      <li>
        <img src="./img/focus3.jpg" alt="">
      </li>
    </ul>
    <!-- 左右侧的箭头 -->
    <a class="left-arrow">&lt;</a>
    <a class="right-arrow">&gt;</a>
    <!-- 底部小圆点 -->
    <ol>
    </ol>
  </div>
</body>

</html>

test.css

* {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    vertical-align: bottom;
}

a {
    text-decoration: none;
}

.wrapper {
    position: relative;
    width: 721px;
    height: 455px;
    margin: 100px auto;
    overflow: hidden;
    border: 1px solid #cccccc;
}

ul {
    position: absolute;
    /* ul的宽度要足够装下所有图片，里面的li开启浮动后才不会换行 */
    width: 4000px;
    cursor: pointer;
}

ul li {
    float: left;
}

.left-arrow,
.right-arrow {
    display: none;
    position: absolute;
    width: 25px;
    height: 35px;
    background-color: rgba(0, 0, 0, .4);
    color: #ffffff;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
}

.left-arrow {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.right-arrow {
    top: 50%;
    left: 100%;
    transform: translate(-100%,-50%);
}

ol {
    position: absolute;
    left: 30px;
    bottom: 10px;  
}

ol li {
    float: left;
    width: 8px;
    height: 8px;
    margin: 5px 8px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, .4);
    cursor: pointer;
}

.current {
    background-color: #ffffff;
}

test.js

window.addEventListener('load', function () {
    var wrapper = document.querySelector('.wrapper')
    var leftArrow = document.querySelector('.left-arrow')
    var rightArrow = document.querySelector('.right-arrow')
    var ol = document.querySelector('ol')
    var ul = document.querySelector('ul')
    var lisOfUl = ul.querySelectorAll('li')

    // 鼠标移入wrapper，左右侧的箭头显示,移出消失
    // 鼠标移入wrapper，自动播放取消，移出开始播放
    wrapper.addEventListener('mouseenter', function () {
        leftArrow.style.display = 'block';
        rightArrow.style.display = 'block';
        window.clearInterval(autoPlay)
    })
    wrapper.addEventListener('mouseleave', function () {
        leftArrow.style.display = 'none';
        rightArrow.style.display = 'none';
        autoPlay = window.setInterval(function () {
            rightArrow.click()
        }, 2000)
    })

    // 根据图片数量自动生成小圆点
    for (var i = 0; i < lisOfUl.length; i++) {
        var li = document.createElement('li')
        ol.appendChild(li)

        // 为li添加索引
        li.setAttribute('data-index', i)

        // 每生成一个小点，重新获取lis
        var lisOfOl = ol.querySelectorAll('li')

        // 小圆点点击后变色
        li.addEventListener('click', function () {
            // 排他思想
            for (var i = 0; i < lisOfOl.length; i++) {
                lisOfOl[i].className = ''
            }
            this.className = 'current'

            // 小圆点点击后，跳到对应的图片
            animate(ul, -this.getAttribute('data-index') * 721)

            // 小圆点点击后，修改count的值
            count = this.getAttribute('data-index')
        })
    }

    // 为了实现无缝滚动，不会突兀，需要在ul最后一张图之后，克隆第一张图
    var newLi = lisOfUl[0].cloneNode(true)
    ul.appendChild(newLi)

    // 记录到达的图片号
    var count = 0;
    // 先手动调用一次，后面变成回调函数使用
    changeCurrent(count)

    var lisOfOl = ol.querySelectorAll('li')

    // 根据图片号，改变小圆点的样式
    function changeCurrent(count) {
        for (var i = 0; i < lisOfOl.length; i++) {
            lisOfOl[i].className = ''
        }
        count = count > 3 ? count % 4 : count
        lisOfOl[count].className = 'current'
    }

    // 开启节流阀
    function open() {
        flag = true
    }

    // 右侧箭头点击切换图片
    rightArrow.addEventListener('click', function () {
        if (flag) {
            // 关闭节流阀
            flag = false
            count++
            // 若count到达极限，重新计算，且ul的left值立马设置为0
            if (count > 4) {
                count = count % 4
                ul.style.left = 0 + 'px'
            }
            // 利用回调函数，开启节流阀
            animate(ul, -721 * count, open)
            changeCurrent(count)
        }
    })

    // 左侧箭头点击切换图片
    leftArrow.addEventListener('click', function () {
        if (flag) {
            flag = false
            count--
            // 若count到达极限，重新计算，且立马修改ul的left值，呈现最后一张图片
            if (count < 0) {
                // count设置为3，目标是移动到倒数第二张图片
                count = 3
                ul.style.left = -721 * lisOfUl.length + 'px'
            }
            animate(ul, -721 * count, open)
            changeCurrent(count)
        }
    })

    // 轮播图自动播放
    var autoPlay = window.setInterval(function () {
        // 手动调用点击事件
        rightArrow.click();
    }, 2000)

    // 节流阀，限制点击速度，要求等图片移动完毕才能再次点击
    // 默认为true，才能进行第一次点击
    var flag = true
})

Suikoigia

公開された135元の記事・ウォンの賞賛0 ・ビュー3083

プライベートの手紙の懸念

目的関数

test.htmlという

test.css

test.js

おすすめ