Javascript 实现无缝切换/自动播放轮播图

最新推荐文章于 2024-05-01 02:45:35 发布
最新推荐文章于 2024-05-01 02:45:35 发布
阅读量3.5k 收藏 78
点赞数 14
分类专栏： JavaScript CSS HTML 文章标签： js 轮播图 javascript 网页特效 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405938/article/details/114739214
版权
CSS 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
JavaScript
6 篇文章 0 订阅
订阅专栏
HTML
4 篇文章 1 订阅
订阅专栏

一、功能需求

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

二、实现思路

1.整体分析

  1. 此时需要添加 load 事件。
  2. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
  3. 显示隐藏 display 按钮。

2.动态生成小圆圈

  1. 核心思路:小圆圈的个数要跟图片张数一致
  2. 所以首先先得到ul里面图片的张数(图片放入li里面，所以就是li的个数)
  3. 利用循环动态生成小圆圈(这个小圆圈要放入ol里面)
  4. 创建节点 createElement(‘li’)
  5. 插入节点 ol. appendChild(li)
  6. 第一个小圆圈需要添加 current 类

3.小圆圈的排他思想

  1. 点击当前小圆圈，就添加current类
  2. 其余的小圆圈就移除这个current类
  3. 注意:我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了。

4.点击小圆圈滚动图片

  1. 此时用到animate动画函数，将js文件引入(注意，因为index.js 依赖 animate.js 所以，animate.js 要写到 index.js 上面)
  2. 使用动画函数的前提，该元素必须有定位
  3. 注意是ul移动而不是小li
  4. 滚动图片的核心算法: 点击某个小圆圈 ， 就让图片滚动 小圆圈的索引号乘以图片的宽度做为ul移动距离
  5. 此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定 义属性即可。

5.点击按钮滚动图片

  1. 点击右侧按钮一次，就让图片滚动一张。
  2. 声明一个变量num，点击一次，自增1，让这个变量乘以图片宽度，就是ul的滚动距离。
  3. 图片无缝滚动原理: 把ul 第一个li 复制一份，放到ul 的最后面
  4. 当图片滚动到克隆的最后一张图片时， 让ul 快速的、不做动画的跳到最左侧: left 为0
  5. 同时num 赋值为0，可以从新开始滚动图片了

6.克隆第一张图片

  1. 克隆ul 第一个li cloneNode() 加true 深克隆 复制里面的子节点 false 浅克隆
  2. 添加到 ul 最后面 appendChild

7.点击右侧按钮，小圆圈跟随变化

  1. 最简单的做法是再声明一个变量circle，每次点击自增
  2. 注意，左侧按钮也需要这个变量，因此要声明全局变量。
  3. 但是图片有5张，我们小圆圈只有4个少一个，必须加一个判断条件，如果circle == 4就从新复原为0

8.自动播放功能

  1. 添加一个定时器
  2. 自动播放轮播图，实际就类似于点击了右侧按钮
  3. 此时我们使用手动调用右侧按钮点击事件 arrow_r.click()
  4. 鼠标经过focus 就停止定时器
  5. 鼠标离开focus 就开启定时器

9.节流阀

  1. 防止轮播图按钮连续点击造成播放过快。
  2. 节流阀目的:当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
  3. 核心实现思路:利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
  4. 开始设置一个变量 var flag = true;
    If(flag) {flag = false; do something} 关闭水龙头 利用回调函数
  5. 动画执行完毕， flag = true 打开水龙头

三、源程序

1.index.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="base.css">
    <link rel="stylesheet" href="index.css">
    <script src="animate.js"></script>
    <script src="index.js"></script>
</head>

<body>
    <div class="focus">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l"> &lt; </a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r"> &gt; </a>
        <!-- 核心的滚动区域 -->
        <ul>
            <li>
                <a href="#"><img src="images/1.PNG" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/2.PNG" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/3.PNG" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/4.PNG" alt=""></a>
            </li>
        </ul>
        <!-- 小圆圈 -->
        <ol class="circle">
        </ol>
    </div>
</body>

</html>

2.index.css

.focus {
    position: relative;
    margin: 80px auto;
    width: 960px;
    height: 540px;
    overflow: hidden;
} 

.focus img {
    width: 960px;
    height: 540px;
}

.focus ul {
    /* 使用动画需要添加定位 */
    position: relative; 
    width: 500%;
}

.focus ul li {
    float: left;
}

.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 48px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 20px;
    z-index: 2;
}

.arrow-l {
    left: 10px;
}
.arrow-r {
    right: 10px;
}

.circle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(255,255,255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    cursor: pointer;
}

.current {
    background-color: #fff;
}

3.base.css

/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #00aeff;
}

button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    /*取消轮廓线 蓝色的*/
    outline: none;
}

body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}

.hide,
.none {
    display: none;
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

4.index.js

window.addEventListener('load', function () {
    // 1. 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 2. 鼠标经过focus 就显示隐藏左右按钮
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null; // 清除定时器变量
    });
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            //手动调用点击事件
            arrow_r.click();
        }, 2000);
    });
    // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个小li 
        var li = document.createElement('li');
        // 记录当前小圆圈的索引号 通过自定义属性来做 
        li.setAttribute('index', i);
        // 把小li插入到ol 里面
        ol.appendChild(li);
        // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function () {
            // 干掉所有人 把所有的小li 清除 current 类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下我自己  当前的小li 设置current 类名
            this.className = 'current';
            // 5. 点击小圆圈，移动图片 当然移动的是 ul 
            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
            // 当我们点击了某个小li 就拿到当前小li 的索引号
            var index = this.getAttribute('index');
            // 当我们点击了某个小li 就要把这个li 的索引号给 num  
            num = index;
            // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
            circle = index;
            // num = circle = index;
            animate(ul, -index * focusWidth);
        })
    }
    // 把ol里面的第一个小li设置类名为 current
    ol.children[0].className = 'current';
    // 6. 克隆第一张图片(li)放到ul 最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7. 点击右侧按钮， 图片滚动一张
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;
    // flag 节流阀
    var flag = true;
    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false; // 关闭节流阀
            // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function () {
                flag = true; // 打开节流阀
            });
            // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
            circle++;
            // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
            if (circle == ol.children.length) {
                circle = 0;
            }
            // 调用函数
            circleChange();
        }
    });
    // 9. 左侧按钮做法
    arrow_l.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--;
            // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            // 调用函数
            circleChange();
        }
    });
    function circleChange() {
        // 先清除其余小圆圈的current类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下当前的小圆圈的current类名
        ol.children[circle].className = 'current';
    }
    // 10. 自动播放轮播图
    var timer = setInterval(function () {
        //手动调用点击事件
        arrow_r.click();
    }, 3000);
})

5.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);
}

四、最终效果

阿蓬2023
关注
  • 14
    点赞
  • 踩
  • 78
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现无缝滚动轮播图
11-27
js+jquery实现无缝滚动轮播图，导航条可左右切换 ， js+jquery实现无缝滚动轮播图，导航条可左右切换 ，
【JavaScript】三种不同的轮播图案例
05-30
常见的轮播图有三种，有缝轮播、无缝轮播和淡入淡出，该资源展示了三种轮播图的一个小案例。 1.有缝轮播（Slideshow）：有缝轮播是最基本的轮播效果。在有缝轮播中，多张图片按照一定的时间间隔依次切换显示。通常，当切换到最后一张图片时，会回到第一张图片，形成循环播放的效果。每次切换图片时，可能会出现短暂的闪烁或者白屏，因为在切换过程中会有一小段时间显示空白。 2.无缝轮播（Carousel）：无缝轮播是在有缝轮播的基础上进行改进，解决了切换时可能出现的闪烁或白屏问题。在无缝轮播中，多张图片之间会通过一种技术手段进行过渡，使得切换时能够平滑过渡，不会出现明显的中断或白屏现象。这样，用户在观看轮播图时会感到更加流畅和自然。 3.渐入渐出（Fade-in/out）：渐入渐出是一种常见的过渡效果，常用于图片轮播中。在渐入渐出效果中，每次切换图片时，当前显示的图片会慢慢淡出，同时新的图片会慢慢淡入，从而形成平滑的过渡效果。这种效果给人一种渐进式的变化感，使得切换更加柔和和美观。
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
最新发布
2401_84434331的博客
05-01 718
num–;//注意此处是ol的子节点的长度-1i++){})六：自动播放实现========自动播放最简单！，只需要一个自动点击即可**此处为右侧按钮自动点击：**将其添加在定时器中就可以完成我们的轮播图啦},2000)完整JS代码：=======我们的 JS 是单独的一个文件，所以加入了 load 事件等文档流执行完毕后，再执行 JS 的内容//光标移动至轮播图区域按钮显示，移开隐藏，点击按钮的变化效果。
vue移动端轮播图（触摸滑动滚动、自动轮播、无缝滚动、循环无回滚）
02-11
基于vue实现移动端轮播图，主要功能手指触摸滑动滚动、自动轮播、无缝滚动、循环无回滚等。图片切换有过渡效果。适合前端初学者学习。欢迎有疑问的小伙伴私聊提问哦。
实现图片无缝滑动的原理
12-16
彻底理解图片滑动的原理，绝对值得收藏的文档！里面有屏幕尺子软件，边学边量边用
JS实现轮播图图片无缝滚动原理
unlilalila的博客
10-20 5203
当轮播图滚动至现有图片最后一张时，需要让轮播图下一跳回到第一张图片，从而实现无限无缝循环滚动效果，但是为什么需要采用克隆来实现呢？为什么不直接从最后一张回到第一张？ 原理：在我们采用 num 变量计算图片移动的次数时，增加了一个 if 的判断条件，用于判断图片是否滚动至最后一张图片位置，如果没有复制或者克隆来新增一个子节点，循环就会在到达最后一张图时num 和left 变为 0 ，但是结束了 if 判断后会有一个 num 自增的动作，所以 num 变为 1 ，就会直接跳到第二张图，故需要克隆第一张图片作.
原生Js实现自动无缝轮播图
cty13697011482的博客
06-16 1489
javascript实现自动无缝轮播图 1、实现原理 轮播图实现原理是用一个大盒子组容器，里面包含一个小盒子，小盒子用来移动，小盒子里装着要轮播的图片，图片水平排放，当小盒子移动的时候带动图片一起移动，要想实现无缝轮播，则要在最后放一张与第一张一摸一样的图片，当图片滚动到最后一张时，用户会感觉这是第一张，然后再跳到第一张，这样用户就不会感觉图片是跳过去的，实现无缝轮播 2、实现效果 （图片上传有大小限制，这里就展示一部分。。。） 3、代码展示 3.1 网页结构布局（html代码） <!DOCTYPE
js实现无缝轮播图
weixin_45571121的博客
09-11 4032
一、轮播图需求 需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮 下面我们来看一下效果图： 二、轮播图的原理 图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
JS实现无缝切换轮播图(自动+手动)
热门推荐
清风的博客
07-01 4万+
说起轮播图，大家应该都不陌生，各大购物网站和面试题里都能看到它的身影。 实现上也并不困难，而写这篇文章是想整理一下自己心血来潮写的代码，以及实现过程中的一些思考，大家也可以顺便复习巩固一下。 今天给大家带来的是过渡动画等效果都由JS实现的无缝轮播图。CSS实现轮播图等以后再写。
【原生js】详解轮播图之无缝滚动
zoro的博客
12-18 1万+
前言：轮播图，是网站首页中最常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播，省事简单。所以我今天想介绍一下原生js代码实现的图片轮播。结构部分html部分<body> <!--展示窗口--> <div class="show_box"> <!--轮播图图片--> <div class="pic_box">
多图轮换，自动播放，鼠标悬停
小白努力走
09-18 1406
效果图： 自动播放，鼠标xua
如何使用JavaScript实现无缝滚动自动播放轮播图效果
10-14
本篇文章将详细讲解如何使用JavaScript实现一个无缝滚动自动播放的轮播图效果。 首先，我们需要理解实现轮播图的基本思路。我们可以将轮播图分解为以下几个关键部分： 1. **动态生成序号**：根据页面中`<li>`元素...
vue实现轮播图（滚动切换，无缝切换，自动切换，循环无回滚等）
02-10
vue实现轮播图，实现滚动切换，无缝切换，自动切换，循环无回滚，暂停滚动等效果。适合初学者学习借鉴。对代码有疑问或者不懂的欢迎私信交流。
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
js实现自动播放匀速轮播图
10-15
【js实现自动播放匀速轮播图】是一种常见的网页交互效果，主要用于展示一系列图片或内容。这个功能通过JavaScript实现，可以使得图片或内容在设定的时间间隔内匀速地自动切换，给用户带来流畅的视觉体验。以下是实现...
js实现无缝轮播图插件封装
10-15
【js实现无缝轮播图插件封装】是一个前端开发中常见的需求，主要目的是创建一个能够自动切换、平滑过渡的图片展示效果。本教程将详细讲解如何使用JavaScript来封装一个自定义的无缝轮播图插件。 首先，我们需要对...
67轮播图实现——轮播循环播放和自动播放
Blog of Lytracy
11-07 1763
文章目录1、箭头按钮点击实现循环播放2、自动播放3、设置切换效果 1、箭头按钮点击实现循环播放 循环播放，索引超出最后⼀张时重新设置为0(第⼀张图⽚)，索引⼩于0时，就设置为最后⼀张的索引。 2、自动播放 ⾃动播放，setInterval定时器 3、设置切换效果 ...
原生js实现轮播图原理分析
konghouy的博客
08-04 2万+
一、轮播图需求 轮播图需要实现左右翻页的无缝连接 需要点击左右切换 需要实现跳转 显示当前位置的小圆点 二、轮播图的原理 1.图片移动实现原理： 利用浮动将所有所有照片依次排成一行，给这一长串图片添加一个父级的遮罩，每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 2.图片移动动画原理： 从a位置移动到b位置，需要先计算两点...
【html+css+js】实现图片轮播效果
Qianmoer的博客
01-27 2464
简单实现 <html> <head> <style type="text/css"> *{background-color:green;} #lunbo{ width:600px; height:600px;position:relative;left:100px;top:50px;} //定义轮播图片所显示的位置 ul{width:100%; height:100%; position:relative;left:0px;top:0px}//为ul标
js轮播图自动播放无缝
12-01
以下是使用JavaScript实现自动播放无缝轮播图的示例代码： ```html <!-- HTML结构 --> <div class="carousel"> <div class="carousel-items"> <img src="image1.jpg" alt=""> <img src="image2.jpg" alt=""> <img src="image3.jpg" alt=""> <img src="image4.jpg" alt=""> </div> </div> ``` ```css /* CSS样式 */ .carousel { position: relative; overflow: hidden; } .carousel-items { position: absolute; display: flex; width: 400%; animation: carousel 20s infinite; } .carousel-items img { width: 25%; } @keyframes carousel { 0% { left: 0; } 20% { left: 0; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } ``` ```javascript // JavaScript代码 const carousel = document.querySelector('.carousel'); const carouselItems = document.querySelector('.carousel-items'); const images = document.querySelectorAll('.carousel-items img'); let currentIndex = 0; let timer; function startCarousel() { timer = setInterval(() => { currentIndex++; if (currentIndex > images.length - 1) { currentIndex = 0; } carouselItems.style.transform = `translateX(-${currentIndex * 25}%)`; }, 2000); } function stopCarousel() { clearInterval(timer); } carousel.addEventListener('mouseenter', stopCarousel); carousel.addEventListener('mouseleave', startCarousel); startCarousel(); ``` 解释： 1. HTML结构中，我们使用一个div元素作为轮播图的容器，内部包含一个class为carousel-items的div元素，用于存放轮播项（这里使用了4张图片作为轮播项）。 2. CSS样式中，我们设置.carousel元素为相对定位，overflow为hidden，以便隐藏.carousel-items元素的溢出部分。.carousel-items元素为绝对定位，使用flex布局，宽度为400%（即每个轮播项的宽度为25%），并使用CSS动画carousel实现轮播效果。 3. JavaScript代码中，我们首先获取.carousel、.carousel-items和.carousel-items img元素，以及当前轮播项的索引值currentIndex和定时器timer。 4. startCarousel函数用于启动轮播，使用setInterval定时器实现自动播放功能。每次定时器触发时，currentIndex加1，如果currentIndex大于轮播项的数量，则将其重置为0。然后，使用translateX属性将.carousel-items元素向左移动，以显示下一个轮播项。 5. stopCarousel函数用于停止轮播，使用clearInterval清除定时器。 6. 最后，我们为.carousel元素添加mouseenter和mouseleave事件监听器，以便在鼠标悬停在轮播图上时停止轮播，在鼠标离开轮播图时重新启动轮播。 --相关问题--: 1. 如何使用JavaScript实现手动切换轮播项？ 2. 如何在轮播图中添加导航点？ 3.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值