JS实现动画特效1（自动/手动播放的轮播图，可实现点击索引的圆点后跳转到对应图）

最新推荐文章于 2025-04-14 09:10:51 发布

Gib Gas!

最新推荐文章于 2025-04-14 09:10:51 发布

阅读量1.9k

点赞数 2

分类专栏：前端学习文章标签： javascript css html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_44584059/article/details/108277495

版权

JS实现动画特效——轮播图

基础——点击移动滑块
进阶——手动轮播图
轮播图自动播放

基础——点击移动滑块

HTML

   <!-- 点击移动滑块S -->
    <h1>点击移动滑块,实现轮播图奠基</h1>
    <div class="slider">
        <button id="slider_btn1">点击向右移动滑块400px</button>
        <div id="slider_demo1"></div>
        <button id="slider_btn2">点击向右移动滑块600px</button>
        <div id="slider_demo2"></div>
    </div>
    <script src="./js/script.js"></script>
    <!-- 点击移动滑块E -->

CSS

/* // 点击移动滑块s */
#slider_demo1 {
    width: 200px;
    height: 200px;
    margin-top: 20px;
    border: 1px solid blue;
    background-color: blue;
    /* 一定要加定位才能实现滑动 */
    position: absolute;
}

#slider_demo2 {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background-color: red;
    /* 一定要加定位才能实现滑动 */
    position: absolute;
    top: 400px;
}

js

     // 点击移动滑块s
    var timer = null;
    var btn1 = document.getElementById("slider_btn1");
    var btn2 = document.getElementById("slider_btn2");
    var demo1 = document.getElementById("slider_demo1");
    var demo2 = document.getElementById("slider_demo2");

    btn1.onclick = function () {
        animate(demo1, 400);
    };
    btn2.onclick = function () {
        animate(demo2, 600);
    };

    function animate(obj, target) {
        // 清除计时,防止重复点击 重复计时
        clearInterval(obj.timer);
        // 开始计时
        obj.timer = setInterval(function () {
            var leader = obj.offsetLeft;
            var step = 10;
            if (leader < target) {
                leader = leader + step;
                obj.style.left = leader + "px";
            } else {
                // 清除计时
                clearInterval(obj.timer);
            }
        }, 15);
    }
    // 点击移动滑块E