Figura Case Carousel

función objetivo

Aquí Insertar imagen Descripción

Vuelco vista carrusel del botón de la izquierda y derecha del módulo, dejó oculta los botones izquierdo y derecho
Haga clic con el botón derecho una vez, una imagen por jugar, y así sucesivamente, el botón izquierdo empatía
Foto reproducir simultáneamente, los siguientes módulos siga los cambios en pequeños círculos juntos
Haga clic en el pequeño círculo, puede reproducir la imagen correspondiente
Ratón sin Carousel ver Carousel Figura jugará automáticamente las imágenes
Vuelco, módulo de mapa carrusel, Parar la Partida automática

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

Publicados 135 artículos originales · ganado elogios 0 · Vistas 3083

carta privada preocupaciones

Figura Case Carousel

función objetivo

test.html

test.css

Test.js

Supongo que te gusta