Carousel Figure Case

Objective function

Here Insert Picture Description

Rollover carousel view of the module, the left and right button, left hidden left and right buttons
Click on the right button once, a picture left to play, and so on, the left button empathy
Photo playback simultaneously, the following modules follow the changes in small circles together
Click on the small circle, you can play the corresponding picture
Mouse without Carousel view Carousel Figure will automatically play pictures
Rollover, carousel map module, Stop Autoplay

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

Published 135 original articles · won praise 0 · Views 3083

Private letter concerns

Carousel Figure Case

Objective function

test.html

test.css

test.js

Guess you like