原生JS实现图片无缝滚动方法(附带封装的运动框架)
话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的。
我们来看看思路吧~
首先我们要实现的效果有以下几点:
小圆点:点击小圆点显示与之对应的图片
向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动
定时器:每隔2s自动播放
主要难点在于:
当图片运动到最后一张,点击向右的按钮时,应该显示第一张;
当前显示的是第一张,点击向左的按钮时,应该显示最后一张;
思路:
1、先将第一张图片复制添加到ul最后面,将最后一张图片复制添加到ul最前面(此时ul的第一张图片是pic3,最后一张图片是pic0);
2、当图片(ul)运动到pic3,继续向前运动,运动到最后一张pic0时,瞬间把ul拉回到第二张图片pic0的位置,然后在继续向前运动;
3、当图片(ul)向后运动到第一张图片pic3时,瞬间把ul拉回到倒数第二张图片pic3的位置。
4、还有非常关键的一点:定义iNow变量,用于对应当前显示的图片与ol中的小圆点,并且可以用来关联ul的位置。
html代码:
< >
css代码:
*{margin:0;padding:0;} li{list-style:none;} #tab{ width:670px; height:240px; border:1pxsolid#ccc; margin:50pxauto; position:relative; } #tabul{ width:2680px; height:240px; position:absolute; left:0; top:0; overflow:hidden; } #tabulli{ float:left; width:670px; } #tabulliimg{ width:670px; } #tabol{ width:80px; position:absolute; bottom:10px; left:50%; margin-left:-40px; overflow:hidden; } #tabolli{ float:left; width:10px; height:10px; background:#ccc; border-radius:50%; margin:5px; cursor:pointer; } #tabol.on{ background:#f00; } #tab.prev,#tab.next{ display:none; width:40px; height:60px; background:rgba(0,0,0,.3); filter:alpha(opacity:30); text-decoration:none; text-align:center; line-height:60px; font-size:30px; color:#fff; position:absolute; top:50%; margin-top:-30px; } #tab.prev{ left:0; } #tab.next{ right:0; }
js代码:
其中animate()是封装好的运动框架,最后面附有说明
window.onload=function(){ varoTab=document.getElementById('tab'); varoUl=oTab.getElementsByTagName('ul')[0]; varaLi1=oUl.children; varoOl=oTab.getElementsByTagName('ol')[0]; varaLi2=oOl.children; varprev=document.getElementById('prev'); varnext=document.getElementById('next'); //设置ul的初始位置 variNow=1; oUl.style.left=-aLi1[0].offsetWidth*iNow+'px'; //定时器 vartimer=null; //克隆第一张图片添加在ul的最后面 varoLi1=aLi1[0].cloneNode(true); //克隆最后一张图片添加在ul的最前面 varoLi2=aLi1[aLi1.length-1].cloneNode(true); oUl.appendChild(oLi1); oUl.insertBefore(oLi2,aLi1[0]); oUl.style.width=aLi1[0].offsetWidth*aLi1.length+"px"; //鼠标移入tab:关闭定时器,左右按钮显示 oTab.onmouseover=function(){ clearInterval(timer); prev.style.display='block'; next.style.display='block'; } //鼠标移出tab:开启定时器,左右按钮隐藏 oTab.onmouseout=function(){ timer=setInterval(function(){ toNext(); },2000); prev.style.display='none'; next.style.display='none'; } //点击小圆点 for(vari=0;i封装的animate()运动框架
/* *参数说明: *obj:运动对象 *json(json形式):需要修改的属性 *options(json形式): *duration:运动时间 *easing:运动方式(匀速、加速、减速) *complete:运动完成后执行的函数 */ functionanimate(obj,json,options){ varoptions=options||{}; varduration=options.duration||500;//运动时间,默认值为500ms; vareasing=options.easing||'linear';//运动方式,默认为linear匀速 varstart={}; vardis={}; for(varnameinjson){ start[name]=parseFloat(getStyle(obj,name));//起始位置 dis[name]=json[name]-start[name];//总距离 } varcount=Math.floor(duration/30);//总次数 varn=0;//次数 clearInterval(obj.timer); obj.timer=setInterval(function(){ if(n>count){ clearInterval(obj.timer); options.complete&&options.complete(); }else{ for(varnameinjson){ switch(easing){ //匀速 case'linear': vara=n/count; varcur=start[name]+dis[name]*a;//当前位置 break; //加速 case'ease-in': vara=n/count; varcur=start[name]+dis[name]*a*a*a; break; //减速 case'ease-out': vara=1-n/count; varcur=start[name]+dis[name]*(1-a*a*a); break; } if(name=='opacity'){ obj.style.opacity=cur; obj.style.filter='alpha(opacity='+cur*100+')';//兼容IE8及以下 }else{ obj.style[name]=cur+'px'; } } } n++; },30); } //获取非行间样式 functiongetStyle(obj,sName){ return(obj.currentStyle||getComputedStyle(obj,false))[sName]; }以上这篇原生JS实现图片无缝滚动方法(附带封装的运动框架)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。