JS实现轮播图(自动+手动)_js轮播图自动播放和手动控制-CSDN博客

本文链接：https://blog.csdn.net/qq_49900295/article/details/123687582

网页轮播图效果：

请添加图片描述

核心原理：

tips:代码在文章末尾
在这里插入图片描述
这个ul就是我们这四张图片的父盒子，我们通过对这个父盒子添加动画函数来实现移动，然后给父盒子来一个溢出隐藏就达到了轮播的效果

动画函数如下：

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);
        //回调函数写到定时器结束里面
        if(callback) {
   
            callback();//调用函数
        }
    }
    else {
   
        obj.style.left = obj.offsetLeft + step + 'px';
    }
    },10);
}

在本例中，我们将这个动画函数封装在一个js文件里，这样我们在移动父盒子时，就可以直接调用这个动画函数。
对这里有疑问的同学可以去我的上一篇讲动画函数封装的文章里了解一下。

功能分析

我们分析下要做一个完美的网页轮播图都应该具备哪些功能：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
图片播放的同时，下面小圆圈模块跟随一起变化。
点击小圆圈，可以播放相应图片。
鼠标不经过轮播图，轮播图也会自动播放图片。
鼠标经过，轮播图模块，自动播放停止。

代码示例

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <style>
    * {
     
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box {
     
        position: relative;
        margin: 200px auto;
        width: 721px;
        height: 455px;
        overflow: hidden;
    }
    .left,
    .right {
     
        display: none;
        position: absolute;
        width: 25px;
        height: 35px;
        background: rgba(0, 0, 0, .3);
        line-height: 30px;
        text-align: center;
        font-size: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }
    a {
     
        text-decoration: