H5，C3，JS 制作轮播图

animate.js定时器文件

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

 js轮播图文件

window.addEventListener('load', function () {
    let left = document.querySelector('.left')
    let right = document.querySelector('.right')
    let focus = document.querySelector('.focus')
    let focuswidth = focus.offsetWidth;
    // let focushight = focus.offsetHight;
    console.log(focuswidth);
    // console.log(focushight);


    focus.addEventListener('mouseenter', function () {
        left.style.display = 'block'
        right.style.display = 'block'
        clearInterval(timer);
    })
    focus.addEventListener('mouseleave', function () {
        left.style.display = 'none'
        right.style.display = 'none'
        timer = setInterval(function () {
            right.click();
        }, 2000);
    })

    let ul = focus.querySelector('ul')
    let ol = focus.querySelector('.circle')

    for (let i = 0; i < ul.children.length; i++) {
        let li = document.createElement('li');
        // console.log(li);
        li.setAttribute('index', i);
        ol.appendChild(li);

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

            
            let index = this.getAttribute('index');
            animate(ul, -index * focuswidth);
        })

    }
    ol.children[0].className = 'current';



    let first = ul.children[0].cloneNode(true)
    // console.log(first);
    ul.appendChild(first)

    let num = 0;
    let circle = 0;

    let flag = true;
    right.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focuswidth, function () {
                flag = true;
            })


            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }

            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = ''
            }
            ol.children[circle].className = 'current'
        }
    })



    left.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focuswidth + 'px';

            }
            num--;
            animate(ul, -num * focuswidth, function () {
                flag = true;
            });



            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            console.log(circle);
            ol.children[circle].className = 'current';
        }

    })


    var timer = setInterval(function () {
        right.click();//手动点击事件
    }, 2000);

})

css文件

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.box{
    width: 750px;
    height: 500px;
    margin: 100px auto;
    /* background-color: royalblue; */
}
.focus{
    position: relative;
    width: 750px;
    height: 500px;
    overflow: hidden;
    background-color: seagreen;
}
.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
}
.focus ul li {
    float: left;
}
.focus ul li:nth-child(1) {
    width: 750px;
    height: 500px;
    background-color: royalblue;
}
.focus ul li:nth-child(2) {
    width: 750px;
    height: 500px;
    background-color: rgb(172, 225, 65);
}
.focus ul li:nth-child(3) {
    width: 750px;
    height: 500px;
    background-color: rgb(225, 65, 113);
}
.focus ul li:nth-child(4) {
    width: 750px;
    height: 500px;
    background-color: rgb(225, 129, 65);
}
.focus ul li:nth-child(5) {
    width: 750px;
    height: 500px;
    background-color: royalblue;
}

.focus .left{
    position: absolute;
    top: 50%;
    /* margin-top: -20px; */
    transform: translateY(-50%);
    width: 30px;
    height: 50px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 18px;
    z-index: 2;
    display: none;
}
.focus .right {
    position: absolute;
    top: 50%;
    /* margin-top: -20px; */
    transform: translateY(-50%);
    right: 0px;
    width: 30px;
    height: 50px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 18px;
    z-index: 2;
    display: none;

}
.circle{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    /* width: 150px; */
    /* height: 20px; */
    background-color: rgba(255,2655,255,.3);
    border-radius: 10px;
}
.circle li {
    float: left;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,2655,255,.5);
    border-radius: 50%;
    margin: 0 5px;
}
.current {
    background-color: #fff;
}

HTML文件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="轮播图.css">
    <script src="轮播图animate.js"></script>
    <script src="轮播图.js"></script>
    <!-- <script src="./练习/练习.js"></script> -->
</head>

<body>
    <div class="box">
        <div class="focus">
            <a href="javascript:;" class="left">&lt;</a>
            <a href="javascript:;" class="right">&gt;</a>

            <ul>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
            </ul>

            <ol class="circle">
                <!-- <li class="current"></li> -->

            </ol>
        </div>
    </div>
</body>

</html>

 

 效果i