| js制作轮播图（包括动画函数封装、定时器、自定义属性绑定序号等的应用） | 您所在的位置：网站首页 › 轮播图定时器工作原理 › js制作轮播图（包括动画函数封装、定时器、自定义属性绑定序号等的应用） |
|
1.缓动动画的基本原理 Document div{ background-color: pink; width: 200px; height: 200px; position: absolute; left: 0; } 点击才走 var div=document.querySelector('div'); function animate(obj,target,change){ //change=function() clearInterval(obj.time); obj.time=setInterval(function() { var step=Math.ceil((target-obj.offsetLeft)/10)//往上取整 if(obj.offsetLeft==target){ clearInterval(obj.time); if(change){ change(); //调用函数,动画结束之后才执行，回调函数 } } obj.style.left = obj.offsetLeft + step + 'px'; },30) } var btn=document.querySelector('button'); btn.addEventListener('click',function(){ animate(div,500,function(){ //实参可以传递函数给实参 div.style.backgroundColor='purple'; }); }) 2.缓动动画的应用1——侧边画出栏的制作 Document span{ width: 50px; height: 50px; background-color: pink; text-align: center; line-height: 50px; z-index: 2; float: left; position: absolute; right: 0; } .que{ height: 50px; width: 150px; text-align: center; line-height: 50px; background-color: pink; z-index: 1; float: left; position: absolute; right: -100px; } .box{ width: 200px; height: 50px; position: absolute; right: 0; } ⬅ 问题反馈 var span=document.querySelector('span'); var wenti=document.querySelector('.que'); span.addEventListener('mouseenter',function(){ animate(wenti,0,function(){ span.innerHTML='➡'; }) }) span.addEventListener('mouseleave',function(){ animate(wenti,150) }) function animate(obj,target,change){ //change=function() clearInterval(obj.time); obj.time=setInterval(function() { var step=Math.ceil((target-obj.offsetLeft)/10)//往上取整 if(obj.offsetLeft==target){ clearInterval(obj.time); if(change){ change(); //调用函数,动画结束之后才执行，回调函数 } } obj.style.left = obj.offsetLeft + step + 'px'; },30) }3.缓动动画的应用2——轮播图 html和css部分 轮播图 .lunbo li a img{ width: 720px; height: 455px; } .lunbo li{ float: left; } .lunbo{ position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 600%; /* 父盒子比ul小，一行显示不完，所以不能浮动，必须设置ul的宽度足够宽 */ } .focus{ position: relative; width: 720px; height: 455px; background-color: purple; margin: 100px auto; overflow: hidden; } .arrow-l,.arrow-r{ position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; display: none; z-index: 2; } .arrow-r{ right: 0; } .circle li{ float: left; width: 8px; height: 8px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; margin: 0 3px; cursor: pointer; } .circle{ position: absolute; bottom: 10px; left: 300px; } .focus img{ width: 720px; height: 455px; } ul li{ list-style: none; } .current{ background-color: #fff; } ; ;js部分 window.onload = function() { // 移动动画函数 function animate(obj,target,change){ // change=function() clearInterval(obj.time); obj.time=setInterval(function() { // var step=Math.ceil((target-obj.offsetLeft)/10)//往上取整 var step=(target-obj.offsetLeft)/10; step=step>0? Math.ceil(step):Math.floor(step);//大于0则向上取整，小于0则向下取整 if(obj.offsetLeft==target){ clearInterval(obj.time); if(change){ change(); //调用函数,动画结束之后才执行，回调函数 } } obj.style.left = obj.offsetLeft + step + 'px'; },20) } var arrow_l=document.querySelector('.arrow-l'); var arrow_r=document.querySelector('.arrow-r'); var focus=document.querySelector('.focus'); var focuswidth=focus.offsetWidth; //鼠标经过就显示和隐藏 focus.addEventListener('mouseenter',function(){ arrow_l.style.display='block'; arrow_r.style.display='block'; clearInterval(timer); }) focus.addEventListener('mouseleave',function(){ arrow_l.style.display='none'; arrow_r.style.display='none'; timer=setInterval(function(){ //手动调用点击事件（直接调用右侧的点击事件） arrow_r.click(); },2000) }) //动态生成小圆圈 var lunbo=focus.querySelector('.lunbo'); var circle=focus.querySelector('.circle'); // var index; for(var i=0;i |
| CopyRight 2018-2019 实验室设备网 版权所有 |