简单轮播图的实现

柔情只为你懂 2023-03-14 08:19 89阅读 0赞

简单轮播图的实现

#简单轮播图的实现的思路

  1. 所谓的简单轮播图就是指每一个数字按钮对应一张图片，并能够点击数字按钮实现图片的跳转。
  2. 其实轮播图就是一个ul列表中的每一个li浮动成一行，将超过盒子的部分隐藏。痛过点击数字按钮使整体的ul列表向左右侧移动，视觉是感受不到整体的ul列表移动只能感受到某一张图片移动。
  3. 主要问题是：移动的距离其实就是盒子的大小*（数字按钮数字大小-1），因为是向左移动所以是负数所以向左侧移动的距离target=-盒子的大小*（数字按钮数字大小-1）。值得注意的是要将每个数字添加自己的一个学好属性。是为了更加方便的计算移动距离

  4. 下面是实现的代码，可在vscode中实现（注意：需要重新更改图片路径，要不然会报错）

    <!DOCTYPE html> 简单轮播图

发表评论

表情：
评论列表 （有 0 条评论，89人围观）

还没有评论，来说两句吧...

相关阅读

    相关 简单的轮播图实现

    轮播图介绍 轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小，但本文中谈及的轮播...

    骑猪看日落骑猪看日落/ 0 赞/ 164 阅读

    相关 轮播图的简单实现

    看上网上的教程，然后自己做了一个简单的轮播图案例： 图片是从京东上轮播图扣下来的图片。（自己抠图的时候，记得改下代码中盒子的宽度和图片的宽度一致，以及鼠标放上去的时候targ

    梦里梦外;梦里梦外;/ 0 赞/ 45 阅读

    相关 简单轮播图的实现

    简单轮播图的实现 \简单轮播图的实现的思路 1. 所谓的简单轮播图就是指每一个数字按钮对应一张图片，并能够点击数字按钮实现图片的跳转。 2. 其实轮播图就是一个ul列表

    柔情只为你懂柔情只为你懂/ 0 赞/ 90 阅读

    相关 vue实现简单轮播图

    实现思路: 1. 将vue的框架封装在function中，在界面刷新时调用，将要轮播的图片存放在data中，还有下面的列表也分别保存在data中的一个数组中，然后每隔一

    比眉伴天荒比眉伴天荒/ 0 赞/ 463 阅读