JavaScript轮播停留效果的实现思路

一、思路

1.轮播停留与无线滚动十分类似,都是利用属性及变量控制移动实现轮播;

2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果

二、步骤

1.写基本结构样式

需在末尾多添加一张与第一张相同的图片,消除切换时的抖动;

2.添加轮播停留事件 有了之前的基础,直接添加索引圈认事件到轮播停留事件内;

注意:当轮播到最后一张时,需要消除掉过渡,这里使用setTimeout定时器,卡最后一张图片轮播完不延时,直接跳转到第一张,由于第一张和最后一张一样,所以会形成视觉盲区,看起来是连续轮播效果

= 6) { count = 0; Box.className = "Box"; //marginLeft=0之前去除过渡属性 Box.style.marginLeft = "0px"; } circle[count].style.backgroundColor = "red"; },500); }

3.添加进入索引圈事件

这和淡入淡出进入索引圈事件基本一致,不同的是这里不用调用轮播停留事件,直接利用当前index来索引使图片跟随变换;注意最后要标记count=this.index值,令再次执行认行为时是紧跟着当前显示图片后执行认行为;

rush:js;"> //进入索引圈事件 for(var j=0;j图片跟随移动 Box.className="Box anmint"; Box.style.marginLeft=(-800*this.index)+"px"; count=this.index; } }

4.完善鼠标进入离开代码

效果图:

完整代码

rush:js;"> <Meta charset="UTF-8"> JS轮播停留<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>
Box"> Box1.jpg"> Box2.jpg"> Box3.jpg"> Box4.jpg"> Box5.jpg"> Box6.jpg"> Box1.jpg">

总结

以上所述是小编给大家介绍的JavaScript轮播停留效果的思路详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...