[精彩视频分享]JS+CSS实现的轮播效果图-优快云博客

本文介绍了一种使用JavaScript和CSS实现的轮播图效果。通过详细的视频教程和示例代码，展示了如何创建平滑过渡的图片轮播功能。重点介绍了自定义动画速度和透明度变化的方法。

JS+CSS实现的轮播效果图。视频讲得非常详细

JS部分代码

// JavaScript Document

function startMove(obj,json,endFn){

       clearInterval(obj.timer);

       obj.timer = setInterval(function(){

           var bBtn = true;

           for(var attr in json){

               var iCur = 0;

               if(attr == 'opacity'){
                   if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                   iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

                   }
                   else{
                       iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                   }
               }
               else{
                   iCur = parseInt(getStyle(obj,attr)) || 0;
               }

               var iSpeed = (json[attr] - iCur)/8;
           iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
               if(iCur!=json[attr]){
                   bBtn = false;
               }

               if(attr == 'opacity'){
                   obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
                   obj.style.opacity = (iCur + iSpeed)/100;

               }
               else{
                   obj.style[attr] = iCur + iSpeed + 'px';
               }


           }

           if(bBtn){
               clearInterval(obj.timer);

               if(endFn){
                   endFn.call(obj);
               }
           }

       },30);

   }


   function getStyle(obj,attr){
       if(obj.currentStyle){
           return obj.currentStyle[attr];
       }
       else{
           return getComputedStyle(obj,false)[attr];
       }
   }

转载于:https://www.cnblogs.com/cfmao/archive/2012/11/19/2777706.html