轮播图交互设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44957344/article/details/103559428

需求：

1.鼠标移入轮播图时左右两边显示上一页下一页按钮，移出时隐藏

2.鼠标点击箭头，图片发生轮播

3.点击圆点，切换到指定图片

4.鼠标移出，图片每隔规定时间自动轮播

5.当图片轮播到最后或最前一张的时候，图片无缝循环切换

动画- -animate.js:

function animate(obj, target, callback) {
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10
        step = (step > 0) ? Math.ceil(step) : Math.floor(step)
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer)
           callback && callback()
        }
        obj.style.left = obj.offsetLeft + step + 'px'

    }, 20)
}

swiper.js

window.addEventListener('load', function () {
    var prev = document.querySelector('.prve')
    var next = document.querySelector('.next')
    var banner = document.querySelector('#banner')
    banner.addEventListener('mouseenter', function () {
        prev.style.display = 'block'
        next.style.display = 'block'
        clearInterval(timer)
        timer = null
    })
    banner.addEventListener('mouseleave', function () {
        prev.style.display = 'none'
        next.style.display = 'none'
        timer = setInterval(function () {
            next.click();
        }, 2000)
    })

    var ul = banner.querySelector('ul')
    var ol = banner.querySelector('ol')
    const bannerWidth = banner.offsetWidth
    for (let i = 0; i < ul.children.length; i++) {
        let li = document.createElement('li')
        li.className = 'other'
        li.setAttribute('index', i)//给ol的li设置index属性
        ol.appendChild(li)

        li.addEventListener('click', function () {
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].className = 'other'
            }
            this.className = 'current'

            let index = this.getAttribute('index')

            animate(ul, -index * bannerWidth)
            num = circle = index
        })
    }
    ol.children[0].className = 'current'
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)
    var num = 0
    var circle = 0
    var flag = true

    next.addEventListener('click', function () {
        if (flag) {
            flag = false
            if (num == ol.children.length) {
                num = 0
                ul.style.left = 0
            }
            num++

            animate(ul, -num * bannerWidth, function () {
                flag = true
            })
            circle++
            circle = circle == ol.children.length ? circle = 0 : circle
            Circle()
        }
    })
    prev.addEventListener('click', function () {
        if (flag) {
            flag = false
            if (num == 0) {
                num = ol.children.length
                ul.style.left = -num * bannerWidth + 'px'
            }
            num--
            animate(ul, -num * bannerWidth, function () {
                flag = true
            })
            circle = circle == 0 ? circle = ol.children.length : circle
            circle--
            Circle()
        }


    })

    var timer = setInterval(function () {
        next.click();
    }, 2000)
    function Circle() {
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].className = 'other'
        }
        ol.children[circle].className = 'current'

    }

})

dome.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #banner {
            position: relative;
            margin: 0 auto;
            width: 400px;
            height: 200px;
            background-color: aquamarine;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div {
            margin: 0 auto;
        }

        #banner ul {
            position: absolute;
            left: 0;
            width: 500%;
            height: 200px;
        }

        #banner :nth-child(1) li {
            width: 400px;
            height: 200px;
            list-style: none;
            float: left;

        }

        #banner :nth-child(1) :nth-child(1) {
            background-color: blue;
        }

        #banner :nth-child(1) :nth-child(2) {
            background-color: red;
        }

        #banner :nth-child(1) :nth-child(3) {
            background-color: yellow;
        }

        #banner :nth-child(1) :nth-child(4) {
            background-color: green;
        }

        #banner :nth-child(1) :nth-child(5) {
            background-color: blue;
        }

        .prve,
        .next {
            cursor: pointer;
            display: none;
        }

        .prve {
            width: 30px;
            height: 30px;
            background-color: greenyellow;
        }

        .next {
            width: 30px;
            height: 30px;
            background-color: hotpink;
        }

        #banner ol {
            position: absolute;
            bottom: 0px;
        }

        .other,
        .current {
            cursor: pointer;
            display: inline-block;
            position: relative;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            list-style: none;
            margin-left: 3px;
        }

        .other {
            background-color: white;
        }

        .current {
            background-color: black;
        }
    </style>
</head>

<body>
    <div id="banner">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol></ol>
    </div>
    <div class="prve"></div>
    <div class="next"></div>
</body>
<script src="./animate.js"></script>
<script src="./swiper.js"></script>

</html>