利用函数递归实现简单的轮播图效果
2019-05-19 16:37
791 查看
利用递归实现简单的轮播图效果
对于初学者而言,提到轮播图,首先想到到的是利用
for循环和
定时器来实现图片的循环播放,但是实践证明,在
for循环中使用
定时器并不能实现图片之间的过度和图片的循环播放。那么轮播图该怎样实现呢?
在js中,
递归实际也是一种循环,而且如果不设置限制条件,递归是一个死循环。
递归函数就是在函数内部调用函数自身。
下面就用递归函数做一个简单的轮播图。
首先创建一个html文件,引入几张图片
最后一张和第一张图片是一样的,是为了更好地显示过渡的效果
<body> <div class="box"> <ul id="list"> <li><img src="imgs/1.jpg"></li> <li><img src="imgs/2.jpg"></li> <li><img src="imgs/3.jpg"></li> <li><img src="imgs/4.jpg"></li> <li><img src="imgs/5.jpg"></li> <li><img src="imgs/6.jpg"></li> <li><img src="imgs/7.jpg"></li> <li><img src="imgs/1.jpg"></li> </ul> </div> </body>
设置一下基本样式
.box{ width: 600px; height: 320px; border: 2px solid red; margin:20px auto; overflow: hidden; } /* 调整li尺寸与显示框相同大小,并让li横向并排显示 */ .box ul{ width: 4800px; position: relative; left:0px; } .box ul li{ float: left; width: 600px; height: 320px; background-color: aqua; } /* li中图片大小与li窗口大小一致 */ #list li img{ width: 600px; height: 320px; }
下面来写js
我是将函数进行了封装,已便后期重复使用。
下面是函数使用的参数:
- move 一次性移动的距离(有正负之分)
- yctime 延迟时间(单位:毫秒)
- gdTime 过度时间(单位:秒)
- num 表示li的个数
// 获取ul标签 var list = document.getElementById("list"); // 获取li标签的宽度(每一次需要移动的距离) var oLi = list.children; var oLiMove = oLi[0].scrollWidth; var num = oLi.length; // 创建函数 function oMove(move,num,yctime,gdTime){ // 设定ul的相对行为初始值 list.style.transition =0 + "s"; list.style.left = 0 + "px"; var a = 0; function omove(){ a = a - Number(move); console.log(a) list.style.transition =0.8 + "s"; list.style.left = a + "px"; if(a <= -move * num) { clearInterval(setIn); // 递归函数 oMove(move,num,yctime,gdTime); } } // 插入时间贞 var setIn = setInterval(omove,yctime); // 设置悬停(鼠标悬浮事件) list.onmouseover = function(){ clearInterval(setIn); console.log(1); } // 设置移除开始循环 list.onmouseout = function(){ setIn = setInterval(omove,yctime); console.log(2); } } oMove(oLiMove,num,2000,0.8);
整个函数是一个封装的函数,传入对应的参数便可直接使用。
需要注意的点:当设置条件停止循环或者重新启动循环时,(以鼠标悬浮为例)当鼠标移出是,让循环继续,就必须给setIn重新赋值,否则setIn和鼠标移除事件函数中的循环同时发生,就会出现多个循环同时进行,导致图片混乱。
下面使用的一点编写思路,仅供参考:
需求分析:
- 图片间隔1S自动循环播放.
- 鼠标放在上面时播放停止 .
思路:
通过ul的相对位置的循环移动,实现图片展示效果的循环.
- 创建函数.
- 设定ul的初始位置,引入参数来储存移动距离
- 创建函数,设置ul的移动,并将其转换成ul的相对定位
- 插入时间贞,让omove每隔1s执行一次
- 函数中设置停止条件,当最后一个图中展示完成时结束循环,并开始下一轮循环
所用知识点:
定时器:setInterval(),
解除定时clearInterval,
递归函数
希望本段分享可以给大家带来帮助,欢迎大家提出意见和建议。谢谢!
相关文章推荐
- 感知机相关;利用tensorflow等工具定义简单的几层网络(激活函数sigmoid),递归使用链式法则来实现反向传播。
- 利用jQuery srollTop()函数实现类似锚点的定位效果-兼容chrome,firefox,IE,safari
- 利用函数递归调用实现汉诺塔
- 简单实现js轮播图效果
- 利用rmdir()函数实现PHP递归删除目录
- Android之ViewPager自动循环播放(轮播)效果实现(超简单)
- 3.1题目: 利用递归方法实现一个函数,该函数能够实现n的阶乘,即 n! = n*(n-1)*…*3*2*1;
- jQuery实现的简单图片轮播效果完整示例
- 调用MyFocus库,简单实现二十几种轮播效果
- Jquery实现简单的轮播效果(代码管用)
- ViewFlipper的简单使用实现图片轮播效果
- iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果
- 写了一个简单轮播效果实现
- Android之——史上最简单图片轮播广告效果实现
- Vue利用递归实现简单的目录树结构
- vue.js实现简单轮播图效果
- 链表插入元素的三种递归实现 -- 简单递归,数据累加器,函数累加器
- 利用JS实现简单的瀑布流效果
- 简单利用HUDText插件实现血条和怪物伤害减血效果
- Jquery实现简单的轮播效果(代码管用)