轮播图（点击之后，会以滑动的形式滑动到指定的图片-有竖向和横向的显示）

总结：首先实现位置移动的效果就需要用到绝对定位和相对定位的关系，通过改变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值，用来保存点击当前之前点击的事件序号，通过比较当前事件与之前事件的差来设置不同的速度。代码如上。