本文主要介绍了javascript的淘宝幻灯片上下滑动效果，希望对大家学习javascript有所帮助。

样式文件css.css

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }
 
body { background: #ecfaff; }
 
.play { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; }
 
.play .text {width:100%; position:absolute; left:0; bottom:0; height:60px;}
.play .text div {position:absolute; left:0; top:0; width:100%; height:100%; background:black; filter:alpha(opacity:40); opacity:0.4; z-index:99;}
.play .text span {position:absolute; left:0; top:0; width:100%; height:100%; line-height:60px; color:white; z-index:999; text-align:center; font-size:20px;}
 
ol { position: absolute; right: 5px; bottom: 5px; z-index: 99999; }
ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
.active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }
 
ul { position: absolute; top: 0; left: 0; z-index: 1; }
ul li { width: 470px; height: 150px; float: left; }
ul img { float: left; width: 470px; height: 150px; }
 
move.js
function getStyle(obj, name)
{
     if(obj.currentStyle)
     {
           return obj.currentStyle[name];
     }
     else
     {
           return getComputedStyle(obj, false)[name];
     }
}
 
 
//startMove(oDiv, {width: 400, height: 400})
 
 
function startMove(obj, json, fnEnd)
{
     clearInterval(obj.timer);
     obj.timer=setInterval(function (){
           var bStop=true;      //假设：所有值都已经到了
          
           for(var attr in json)
           {
                 var cur=0;
                
                 if(attr=='opacity')
                 {
                      cur=Math.round(parseFloat(getStyle(obj, attr))*100);
                 }
                 else
                 {
                      cur=parseInt(getStyle(obj, attr));
                 }
                
                 var speed=(json[attr]-cur)/6;
                 speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
                 if(cur!=json[attr])
                      bStop=false;
                
                 if(attr=='opacity')
                 {
                      obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                      obj.style.opacity=(cur+speed)/100;
                 }
                 else
                 {
                      obj.style[attr]=cur+speed+'px';
                 }
           }
          
           if(bStop)
           {
                 clearInterval(obj.timer);
                                
                 if(fnEnd)fnEnd();
           }
     }, 30);
}

程序效果如下:

希望这篇文章可以帮助到你，总之同学们，it资讯尽在职坐标。