JS 轮播图
写在前面
最聪明的人是最不愿浪费时间的人。——但丁
实现功能
图片自动切换
鼠标移入停止自动播放，显示按钮
点击按钮，实现前后翻
鼠标移入小圆圈，可以跳转到对应图片
点击左右两侧图片部分区域可以前后前后翻
实现原理
把图片叠在一起，左右两边各移出一张图片，其他的图片就叠在中间图片的下方
通过改变左中右图片的类名，来实现切换图片的效果
假设我要播放下一张图片，就把浅绿色图片的类名给到绿色图片，这样绿色图片就能到浅绿色的位置，同理把绿色图片的类名给黄色，把黄色的类名给下一个
实现效果
由于上传图片大小限制，只截了一小段
几个重要函数的解释
翻页函数
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’;
}
左右翻页思路相同，拿一个来讲
首先定义了一个全局变量 'j’来控制小圆圈的同时移动
把6张图片的类名存在数组当中，这样可以通过修改数组，来修改图片对应的类名，左移时就是右边的图片变成中间，中间图片到左边，第四张图片到右边
可以通过下图的变化来实现，把最后一个类名放到第一个来，也就是先把数组的最后一个元素复制到最前面，再删除最后一个元素，这样数组就改变成功了，再把这个数组依次赋值给图片，这样图片的切换效果就完成了
简易思路
有个数组是[1,2,3,4,5,6]
值为2的对应的样式是中间的图片
值为1的样式是左侧图片
值为3的样式是右侧图片
然后现在要实现左移，数组就变成[6,1,2,3,4,5]
这样中间的图片就变成了下一张，其他的也对应发生变化
小圆圈
全局变量 j 来记录当前是第几张图片，再把第j个小圆圈更改样式就好了
这里应用了排他思想，先把所有的小圆圈取消样式，再给特定圆圈添加样式
经过小圆圈切换对应图片
function jump(){
//鼠标经过的小圆圈索引号是多少
var index = this.getAttribute(‘index’);
//确定当前中间的图片在什么位置，索引号是多少
var now = num.indexOf(‘two’);
//计算经过点与当前点的距离，两个索引号的差值
var dif = Math.max(index,now) - Math.min(index,now);
/* 如果经过的小圆圈索引号大于当前索引号，就是相当与点击了右按钮，差多少，相当于点了几次*/
if(index > now){
while(dif–){
rightf();
}
}else {
while(dif–){
leftf();
}
}
}
注释超详细
完整代码
HTML部分
//左右按钮的消失
box.addEventListener('mouseout',function(){
leftb.style.display = 'none';
rightb.style.display = 'none';
//恢复定时器
clearInterval(timeone);
timeone = setInterval(function(){
rightf();
},1000)
})
//动态生成小圆圈，小圈圈模块
var list = box.querySelector('.list');
for(var i = 0;i < imgs.children.length;i++){
//创建li，加入ul中
var li =document.createElement('li');
list.appendChild(li);
//给小圈圈添加类名
li.setAttribute('index',i);
//排他思想，实现点击小圆圈，变色
li.addEventListener('click',colors);
//经过小圆圈，切换图片
li.addEventListener('mouseenter',jump);
}
//一开始第二个亮
list.children[1].className = 'change';
//变色函数
function colors(){
//把所有的小圆圈变白
for(var i = 0 ; i < list.children.length ; i++){
list.children[i].className = '';
}
//给图片对应的小圆圈上色
var index = this.getAttribute('index');
list.children[index].className = 'change';
}
//跳转函数
function jump(){
var index = this.getAttribute('index');
var now = num.indexOf('two');
//计算经过点与当前点的距离
var dif = Math.max(index,now) - Math.min(index,now);
// console.log(dis);
if(index > now){
while(dif--){
rightf();
}
}else {
while(dif--){
leftf();
}
}
}
//小圆圈跟随着图片移动
var j = 1;
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';
}
//翻页模块
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();
}
//左翻页
leftb.addEventListener('click',leftf)
function leftf(){
num.push(num[0]);
num.shift();
for(var i = 0;i < num.length;i++){
imgt[i].setAttribute('class',num[i]);
}
j--;
colort();
}
//点击图片实现翻页,这里我是通过在左右两边添加一个盒子来实现的
var rights = document.querySelector('.rights');
rights.addEventListener('click',function(){
rightf();
})
var lefts = document.querySelector('.lefts');
lefts.addEventListener('click',function(){
leftf();
})
})
末
以上就是网易云轮播图的全部代码以及解释
如果有什么缺漏错误的地方，欢迎各位大佬指出。
转载自：https://cloud.tencent.com/developer/article/1861965?from=article.detail.1709333
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
