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

最新推荐文章于 2025-03-12 13:07:57 发布

m0_67390969

最新推荐文章于 2025-03-12 13:07:57 发布

阅读量472

点赞数 2

分类专栏：前端 html 文章标签： javascript 前端 npm

本文链接：https://blog.csdn.net/m0_67390969/article/details/123349419

版权

这篇博客详细介绍了如何使用JavaScript实现一个JS轮播图，包括图片自动切换、鼠标交互功能，以及小圆圈控制图片跳转的实现原理和关键函数解释。还提供了完整的HTML、CSS和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最聪明的人是最不愿浪费时间的人。——但丁

在这里插入图片描述

假设我要播放下一张图片，就把浅绿色图片的类名给到绿色图片，这样绿色图片就能到浅绿色的位置，同理把绿色图片的类名给黄色，把黄色的类名给下一个

在这里插入图片描述

在这里插入图片描述由于上传图片大小限制，只截了一小段

翻页函数

var j = 1;
var num = [‘one’,‘two’,‘three’,‘four’,‘five’,‘six’];
rightb.addEventListener(‘click’,rightf);
function rightf(){
//把数组的最后一个添加到第一个
num.unshift(num[5]);
//删除最后一个
num.pop();
//重新给li添加类名
for(var i = 0;i < num.length;i++){
imgt[i].setAttribute(‘class’,num[i]);
}
//通过这个全局变量来让小圆圈的颜色一起变化
j++;
colort();
}
function colort (){
for(var i = 0 ; i < list.children.length ; i++){
list.children[i].className = ‘’;
}
if(j >= 6){
j = 0;
}else if (j < 0 ){
j = 5;
}
list.children[j].className = ‘change’;
}