focus轮播图（带自动功能的轮播图）

最新推荐文章于 2020-07-25 22:29:41 发布

sword_chiu

最新推荐文章于 2020-07-25 22:29:41 发布

阅读量665

点赞数

分类专栏：代码方法收藏代码练习基础知识文章标签： javascript

本文链接：https://blog.csdn.net/sword_chiu/article/details/107095915

版权

本文介绍了如何使用JavaScript创建一个带有自动切换功能的无缝轮播图。关键点包括在<ul>元素末尾添加与第一张图片相同的额外图片，通过计算索引与轮播图宽度确定移动距离，利用自定义属性`index`、`num`和`circle`来同步点击事件与图片显示状态。同时，文中提到要将`animate`函数替换为`move`并传入相应参数。

摘要由CSDN通过智能技术生成

解释：.arrow-l是指左右点击的按钮
focus指的是轮播图的框
focusWidth是指轮播图大小（移动距离）
无缝轮播图的要素在于需要创建一张额外的图（与第一张一致）到ul的最后面，等轮到最后一张图时，快速切回第一张图
相关公式：移动的距离left为索引*轮播图框的宽
因为要实现圆圈与轮播图的互动（点击同一个索引，会有同索引的图），所以要有一个自定义属性index来关联
num是用来查看点了几次，并用来控制点击左右按钮后跳到什么距离（类似于index）
circle用来控制在点击左右按钮后，圈圈同步。
index需要跟nu和circle关联才能达到统一效果
这里使用到的animate（）函数请参考move函数
请把annimate改成move 传参数即可

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

最低0.47元/天解锁文章