总结:首先实现位置移动的效果就需要用到绝对定位和相对定位的关系,通过改变top和left的值。
一、竖向滑动图片。
首先在未添加js和css的一些设置时,几张图片是以竖向依次排开,需要一个父元素来包含承载这几张图片的子元素,通过对父元素的设置如下:
父元素的宽度和高度为图片的宽度和高度,以便于通过实现overflow:hidden来实现效果。
由于在滑动时是将整个父类移动,所以父类也需要一个div包裹,并将该div相对定位,则父类绝对定位。以便于通过js实现位置移动。
var timer=null; function getAction(obj,attr,value){ clearInterval(timer); var object=obj; var attrValue=parseInt(getAttribute(object,attr));//获得对应属性的值 var speed=attrValue>value?-10:10; timer=setInterval(function(){ if((speed>0&&attrValue>=value)||(speed<0&&attrValue<=value)){ clearInterval(timer);//确定什么时候将定时器关掉 } else{ object.style[attr]=attrValue+speed+'px'; attrValue=parseInt(getAttribute(object,attr)); } },30); } function getObj(object){ return document.getElementById(object)?document.getElementById(object):document.getElementsByTagName(object); } function getAttribute(obj,attr){ // console.log(); return window.getComputedStyle ? window.getComputedStyle(obj,'')[attr] : obj.currentStyle[attr]; } window.onload=function(){ var oUl=document.getElementById("showPicture"); var oOl=document.getElementById("click"); var oLis1=oOl.getElementsByTagName("li"); var oLis2=oUl.getElementsByTagName("li"); for(var i=0;i<oLis1.length;i++){ oLis1[i].index=i; oLis1[i].onclick=function(){ getAction(oUl,'top',-250*(this.index)); } } }
关键函数是getAction(),为了达到一张张图片完美的滑动,对于设置宽度和speed很重要,一定要成倍数关系。为了更具有用户体验,当从第一张图片切换到最后一张的话,如果切换的速度和相邻两张切换速度一样,势必会造成不好的影响,所以需要将速度换成动态的,可以通过传参的方法改变速度。这一效果在横向滑动中有添加。
二、横向滑动图片
所引用的函数和竖向的一致,主要是在调用前和怎么调用的区别。
var flag=3; window.onload=function(){ var oUl=document.getElementById("showPicture"); var aLis1=oUl.getElementsByTagName("li"); var oOl=document.getElementById("click"); var aLis2=oOl.getElementsByTagName("li"); for(var i=0;i<aLis1.length;i++){ aLis1[i].style.left=i*390+'px'; } for(var i=0;i<aLis2.length;i++){ aLis2[i].index=i; aLis2[i].onclick=function(){ console.log("在进入当前点击事件之前的flag"+flag); if(Math.abs((flag-this.index))==1){ getAction(oUl,'left',-390*(this.index),30); }else if(Math.abs((flag-this.index))==2){ getAction(oUl,'left',-390*(this.index),65); }else if(Math.abs((flag-this.index))==3){ getAction(oUl,'left',-390*(this.index),130); } flag=this.index; console.log("在进入当前点击事件之后的flag"+flag); } } }
设置一个flag值,用来保存点击当前之前点击的事件序号,通过比较当前事件与之前事件的差来设置不同的速度。代码如上。