原生js模仿网易云音乐首页轮播图

最新推荐文章于 2022-08-22 14:14:14 发布

原创

最新推荐文章于 2022-08-22 14:14:14 发布 · 6.3k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #轮播图

前端初学者通过学习自制了一个原生JavaScript实现的轮播图，模仿网易云音乐首页效果。在没有使用JQuery的情况下，利用函数实现了淡入效果。代码已公开在GitHub，供他人参考。

前端初学者，最近在学习该如何写轮播图。看了一些大神的教程之后，想模仿着写一个和网易云音乐首页类似的轮播图。由于还没有学JQuery，所以自己想了个函数用来实现淡入的效果。逻辑思路借鉴了爱嘎的Front_end的文章《十五分钟用JavaScript基础写一个图片轮播效果+思路详解》。文件已上传至我的github，欢迎查阅https://github.com/littlemonsterolala/WangYiYun

效果：

以下是我的代码，分享给大家~

<!DOCTYPE html>
<html>
    <head lang='en'>
        <meta charset='utf-8'/>
        <style type='text/c

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

monterolala

关注关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS——网易云音乐首页之轮播图的实现（完整版）

Bonsoir777的博客

08-01

2952

本文主要介绍的是网易云音乐首页之轮播图的实现

用qt做网易云音乐--轮播图实现（2）

weixin_51965272的博客

03-24

964

窗体设计大概是这样前面我们写到这里，接下来继续这里的要点，每张图片的位置不同，每张图片的大小不同，没张图片显示的层级不同（就是图片重叠的情况下优先展示的）我们先看这几点，我这里把每张图片的这些特点都写进了list集合，这里详细介绍下 QList<int> m_ZValueList; //每张图片优先级的list,设置那张图片在上那张在下,如同raise()和lower()效果 QList<qreal> m_PixmapScaleList; //每张图片的缩放比例list.

参与评论您还未登录，请先登录后发表或查看评论

原生js仿网易云轮播特效

不会写代码的前端

11-10

4184

原理：运用两张图片切换可视区域向左走或向右走要跳转的图片定位在可视区域的左边或右边然后用缓动动画实现切换重点：缓动动画 js实现步骤：1、获取所需元素 2、创建指示器 3.让第一个选中 4.添加事件 5、切换索引 6、自动轮播 1、获取所需元素 var slider=$("slider"); var slider_main=$("slider_main"); ...

JS轮播图（网易云轮播图）

热门推荐

小丞同学

02-07

1万+

js实现网易云轮播图的完整思路以及代码

移动端轮播图——网易云音乐手机端样式

pilipala6886

03-08

1530

一开始直接用的是一种比较直观的方式，先计算好给定总盒子总宽度，及每个轮播图的宽度，最好事先把高度也确定了。接着用li建立一个横向的图片排列，让图片在屏幕之外也按顺序地排列着，通过修改整个sliderBox的left为负值来移动，transition实现移动轨迹变化，再通过append移动开头/末尾的循环。但实践发现这样是错的。因为用户触摸拖动轮播图时，left值相应地变化，这时该...

原生JS实现小米轮播图和网易云轮播图

xing476255461的博客

09-22

1229

文章目录小米轮播图网易云轮播图 小米轮播图 实现功能：定时切换（2s）点击按钮停止切换点击向左向右按钮进行相应切换鼠标点击下方的小圆点，并进行相应的切换效果：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...

js + css 做出网易云音乐的轮播图

Devil_ErKang的博客

03-26

2546

先说一下思路，网易云轮播图是这样的，每隔一段时间（这里运用到了js的定时器）右边的图片会放大（css的transform）并切换（定位的z-index）上来（这里还运用了过渡transition），最前面一张图片会到左边的下面，如此重复轮播，鼠标移入图片区域（鼠标移入事件），轮播暂停（清除定时器），点击左右箭头可以切换图片（鼠标点击事件），鼠标移入图片下方的悬浮点也可以快速切换图片（悬浮点的鼠标移入事件，这里也要记得清除定时器）。好了，思路说完了，接下来我们开始写代码首先构建文件夹，images..

基于HTML+CSS+JS仿网易云音乐首页网页设计

“仿网易云首页html+css+js”这一项目是一个基于HTML、CSS和JavaScript三大前端核心技术构建的网页设计实例，其目标是高度还原网易云音乐官方网站首页的视觉效果与部分交互功能。该项目适用于计算机相关专业的课程...

仿网易云音乐微信小程序原生源码

该文件标题为“模仿仿网易云音乐 微信小程序源码”，从名称可以看出，这是一份基于微信小程序平台开发的、在界面与功能上高度模仿网易云音乐应用的前端项目源代码。该项目并非使用跨平台框架如uniapp进行开发，而是...

期末HTML/CSS/JQuery项目：网易云音乐网页界面模仿

在模仿网易云音乐的项目中，学生可能需要使用jQuery来实现一些动态效果，如鼠标悬停时显示的菜单、图片轮播、弹出提示框等。通过jQuery，学生能够更方便地为网页添加交互功能，同时减少JavaScript原生代码的编写。 ...

仿网易云音乐微信小程序源码（含截图）

该项目以模仿知名音乐平台“网易云音乐”的用户界面和核心交互逻辑为目标，基于微信小程序框架进行构建，适用于希望深入理解小程序开发机制、提升UI/UX设计能力以及掌握音频处理技术的学习者和开发者。首先，从...

CSS与JS学习案例（17）：网易云音乐轮播图

Rengarhunt的博客

12-14

1092

网易云音乐官网点这里原版：自己做的：和原版相比，没有切换图片时的渐隐渐显效果。 HTML部分：左右箭头图标：阿里巴巴矢量图标库下方选中的白色圆点使用JS自动添加 <div class="container"> <div class="bgbox"></div> <div class="picbox"> <div class="pic"> <d

仿网易云音乐播放旋转磁盘效果 h5

03-18

基于mui框架，利用html加css实现仿网易云的播放效果，磁盘转动，音乐可控播放。更改图片路径等即可使用，实现效果见相关博客记录。

CSS——网易云音乐首页之轮播图的实现（swiper的用法）

Bonsoir777的博客

07-22

1157

今天要和大家分享的是网易云音乐首页中轮播图区域的实现过程

web前端仿网易云官网

m0_58190791的博客

09-23

1946

网站主要运用了 html，css，JS。只展示了部分重要的几部分页面效果展示头部切换运用了for循环头部css .box-first { width: 1100px; height: 100%; margin: 0 auto; } .logo { float: left; width: 176px; .

html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现

weixin_39860064的博客

06-03

1383

Github - program-learning-lists最近在刷网易云音乐歌单时发现首页的轮播图很有意思，正好自己想尝试做一个PC版的网易云音乐，于是就是使用Vue去做这个demo，废话少说，我要出招了，接招吧页面的DOM结构:style="sliderStyle"@mouseover="pause()"@mouseout="play()">:key="index":class="se...

仿网易云音乐 专辑图片折叠轮播

-琥珀-的专栏

05-11

7866

防网易云音乐 专辑图片折叠轮播先不多说现上一张效果图首先简述一下实现原理1.首先让我们的imageview**动起来** 其实是不断的.invalidate();函数让他不断的调用ondarw函数（显然我们不必要不断的调用ondarw函数只有在我们让他动的时候调用即可所以我们要声明一个变量记录change记录是否产生动画） 2.实现我们的可折叠效果 Matrix的setP

一款开源 SpringBoot 后端管理系统，代码开源了！

10-28

1348

嗨喽！Java后端编程的各位小伙伴们，由于公众号做了乱序推送改版，为了保证公众号的推文能够第一时间及时送达到大家手上，大家记得将公众号加星标置顶，公众号每天会送上Java技术干货推文...

微信小程序关于网易云音乐app轮播图效果图

LTL的博客

08-22

850

网易云app的轮播图效果在小程序上实现案例

原生JS打造网易风格轮播图布局与实现

本文档介绍了如何使用原生JavaScript实现网易风格的轮播图效果。首先，我们来看一下实现的步骤和关键布局。一、实现效果图该轮播图采用网易常见的双层布局设计，上层是图片展示区域，由包含图片的六个小盒子组成...