介绍
小编这次要给大家分享的是js代码如何实现轮播图,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
又从头到尾把轮播图研究了一遍,感觉理解更深刻了。
就怕自己搞不懂,分析了各个步骤的思路,为啥用,怎么用。
总算搞清楚了。
话不多说,干货奉上。
效果图:
//1,左右按钮初始隐藏鼠标进入箱按钮显示鼠标离开盒子按钮隐藏//获取元素
var盒=. getelementbyid(& # 39;盒# 39;);
var leftbtn=. getelementbyid (& # 39; leftbtn& # 39;);
var rigbtn=. getelementbyid (& # 39; rigbtn& # 39;);//因为图片宽度是多个事件需要用到所以要定义为全局变量
var pic_width=box.clientWidth;//注册事件
box.addEventListener (& # 39; mouseenter& # 39;,函数(){
leftbtn.style。=& # 39;显示块# 39;;
rigbtn.style。=& # 39;显示块# 39;;//清除定时器停止自动播放
clearInterval(计时器);//停止播放后清空定时器变量提升运行效率
计时器=零;
})；
box.addEventListener (& # 39; mouseleave& # 39;,函数(){
leftbtn.style。=& # 39;显示没有# 39;;
rigbtn.style。=& # 39;显示没有# 39;;//定时器在11条里声明过了这里就不需要再加var进行声明了
计时器=setInterval(函数(){
rigbtn.click ();
}, 1500);
})；//6,创建动画函数动画点击小圆点图片会移动//因为图片需要缓慢移动到目标位置而不是瞬移所以需要让动画函数带缓动效果
动画(obj,目标,回调函数){//obj是移动的对象的目标是移动的目标位置回调是回调函数
clearInterval (obj.timer);//创建缓动函数缓动的核心思想就是把移动到目标位置的距离分成若干小步//一定时间内走一小步,让这个距离在若干时间完成若干小步后走完
函数移动(){//定义每一小步走的距离把一次移动到目标位置的距离分为10份//每一份就是一个步骤
var=(目标- obj.offsetLeft)/10步;//步骤可能不是整数导致最终移动距离有误差//所以要把每一步的步骤变成整数//如果是步正数就取大于步骤的最小整数//如果一步是负数就取小于步骤的最大整数用数学()的知识/*如果(步骤比;0){
一步=Math.ceil(步骤);//向上取整
其他}{
一步=Math.floor(步骤);//向下取整
} *///可以将上面的如果其他语句简化为三元运算符
一步=一步比;0,# 63;Math.ceil(步骤):Math.floor(步骤);//如果走到了目标位置就清除定时器
如果(obj。offsetLeft==目标){
clearInterval (obj.timer);//因为回调函数是定时器结束后再调用函数//所以这里清除定时器后需要判断一下是否有回调函数有就调用没有就不调用/*如果(回调){
回调();
} *///上面的判断语句可以简化为
callback&和回调();
}//把每一小步移动的距离和offsetLeft之和,给obj的左值//注意,这里obj.style.left对应的是数值+像素单位,一定不要忘了+ & # 39;px # 39;
obj.style。左=obj。offsetLeft +一步+ & # 39;px # 39;;
}//给obj创建专属的定时器//用定时器实现一定时间走一小步的结果这里是40毫秒移动一个步骤的距离//注意,专属定时器不需要用变量了
obj。计时器=setInterval(移动,40);
}//2、动态添加小圆点图片的数量就是小圆点的个数//获取元素
var ul01=. getelementbyid (& # 39; ul01& # 39;);
var ul02=. getelementbyid (& # 39; ul02& # 39;);//添加多个李用循环
(var=0;我& lt;ul01.children.length;我+ +){//创建元素creLi
var creLi=document.createElement(& # 39;李# 39;);//3、创建自定义属性材料指数用来获取小圆点的索引号
creLi.setAttribute (& # 39; data-index& # 39;,我);//添加元素
ul02.appendChild (creLi);//4,当前点击的小圆点颜色发生变化创建类urrent//因为图片默认开始显示第一张所以先让第一个小圆点小时当前类
ul02.children [0]。className=& # 39;目前# 39;;//5,给小圆点创建点击事件点击小圆点当前点击的小圆点变色//用排他思想的循环//注册点击事件
creLi.addEventListener(& # 39;点击# 39;,函数(){//干掉所有人
(var=0;我& lt;ul02.children.length;我+ +){
ul02.children[我]。className=& # 39; & # 39;;
}//留下我自己
这一点。className=& # 39;目前# 39;;//7点击小圆点图片跟着动调用动画函数//分析点击圆点1图片向左移动0个图片的宽度box.clientWidth//点击圆点2图片向左移动1个图片的宽度以此类推//图片移动的距离就是当前被点击圆点的索引号乘以图片的宽度//获取自定义属性当前被点击的小圆点的索引号
var指数=this.getAttribute (& # 39; data-index& # 39;);
num=指数;
圆=指数;
动画(ul01指数* pic_width);
})；
}//8,右侧按钮//8.1点击右侧按钮图片向左移动//点击1次图片向左移动1个图片宽度显示图片2//点击2次向左移动2个图片宽度显示图片3以此类推//当显示到第3张图片即最后一张图片时再点击右侧按钮会显示空白//重点:实现无缝链接,即当显示到最后一张图片时再点击右侧按钮会显示图1片//怎么做在图3片后面克隆一张图1片//显示图片3时再点击按钮ul01继续向左移动显示图1片//然后迅速跳转到跳转到图1片让ul01.style.left归零//设置次数变量num
var num=0;//克隆图片1先克隆再添加注意克隆图片也是全局事件不是局部的
var liCopy=ul01.children [0] .cloneNode(真正的)//深克隆
ul01.appendChild (liCopy);//添加新的李后,注意取css里修改ul01的宽度//console.log (ul01.children.length);元素个数变成了4//获取元素rigbtn
var rigbtn=. getelementbyid (& # 39; rigbtn& # 39;);//给按钮点击事件安装节流阀
var=true标记;//左右按钮都要用所以设置全局变量//注册点击事件
rigbtn.addEventListener(& # 39;点击# 39;,函数(){
如果(国旗){//初始状态先把节流阀关了让自动播放的图片播放完一张图片前点击按钮无效
国旗=false;//先做个判断//点击第2次的时候显示图片3再点击就显示克隆的图1片//这时候让ul01位置归零让num的值归零以便从头开始
如果(num==ul01.children。长度- 1){
ul01.style。左=0;
num=0;
}//点击1次移动距离就是1 * pic_width//点击1次让num自增1
num + +;//注意这里如果先自增再做判断//会出现一个bug就是当再次显示图片1时点击无效重新点击才会显示图片2//因为点击第三次时本来应该跳转到图1片的结果num被归零了再点击还是显示图1片//调用动画函数
动画(num * pic_width ul01,函数(){//函数(){}是回调函数//动画结束一个动作后即播放完该图片后再回头打开节流阀让下一次点击生效
国旗=true;
})；
圆+ +;
如果(圆==ul02.children.length) {
圆=0;
}//因为这段排他思想的小圆点代码重复使用所以可以封装成一个函数进行调用/* (var=0;我& lt;ul02.children.length;我+ +){
ul02.children[我]。className=& # 39; & # 39;;
}
ul02.children[圆]。className=& # 39;目前# 39;;*/圆形();
}
})；
函数cir () {
(var=0;我& lt;ul02.children.length;我+ +){
ul02.children[我]。className=& # 39; & # 39;;
}
ul02.children[圆]。className=& # 39;目前# 39;;
}//9点击按钮图片移动小圆点跟着移动点击小圆点图片跟着移动num次数也变化//让图片小圆点按钮次数一起变化的核心就是图片动num变化小圆点当前的当前类发生变化//即图片移动当前小圆点变色点击按钮当前小圆点变色//当前小圆点变色图片移动按钮次数发生变化num指数图片距离一起变化//但是指数是局部变量怎么让三者绑定呢//就要重新创建一个全局变量代替指数作为小圆点当前的索引号让三者绑定
var圆=0;//10点击左侧按钮//和右侧按钮点击事件的代码基本相同但是方向相反需要修改一些数据//直接把右侧按钮点击事件的代码复制过来然后修改数据//获取元素leftbtn
var leftbtn=. getelementbyid (& # 39; leftbtn& # 39;);//注册点击事件
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
nulljs代码如何实现轮播图
