189 8069 5689

使用JavaScript怎么编写一个旋转木马轮播图效果-创新互联

本文章向大家介绍使用JavaScript怎么编写一个旋转木马轮播图效果的基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

创新互联自2013年创立以来，是专业互联网技术服务公司，拥有项目成都网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元潼关做网站,已为上家服务,为潼关各地企业和个人服务,联系电话:13518219792



 
 旋转木马特效
 
 *{margin: 0;padding: 0;list-style:none;}
 #demo{width:1200px;margin:100px auto 0;}
 #innerht{width:1200px;height:500px;position:relative;}
 ul li{position:absolute;top:0;left:0;z-index:1;}
 ul li img{width:100%;}
 #corrow{position:absolute;width:100%;top:50%;opacity:0;z-index:99;}
 #btn_lef,#btn_rig{position:absolute;height:112px;width:76px;top:50%;margin-top:-56px;}
 #btn_lef{left:0;}
 #btn_rig{right:0;}
 


 
 
  
    
  
    • 
  
    • 
  
    • 
  
    • 
  
    • 
  

  
  
  
  
 
 
 (function(window){  function $(id){   return document.getElementById(id);  }; //每张图片对应的样式  var tempArr = [   {   "width":400,   "top":20,   "left":50,   "opacity":0.2,   "zIndex":2   },   {   "width":600,   "top":70,   "left":0,   "opacity":0.8,   "zIndex":3   },   {   "width":800,   "top":100,   "left":200,   "opacity":1,   "zIndex":4   },   {   "width":600,   "top":70,   "left":600,   "opacity":0.8,   "zIndex":3   },   {   "width":400,   "top":20,   "left":750,   "opacity":0.2,   "zIndex":2   }  ];  // 设置限流函数  var onOff = true ;  // 获取对象  var left = $("btn_lef"),right = $("btn_rig"),innerht = $("innerht"),ul = innerht.children[0],lis = ul.children,arrow = $("corrow");  // 给每个li添加样式  addStyle();  // 大盒子的hover事件  innerht.onmouseover = function(){   animate(arrow,{"opacity":1});  };  innerht.onmouseout = function(){   animate(arrow,{"opacity":0});  };  // 右箭头点击事件  right.onclick = function(){   if( onOff ){   onOff = false;   var atop = tempArr.shift();   tempArr.push( atop );   addStyle();   };  };  // 左箭头点击事件  left.onclick = function(){   if( onOff ){   onOff = false;   var apop = tempArr.pop();   tempArr.unshift( apop );   addStyle();   };  };  function addStyle(){   for( i = 0 ; i < lis.length ; i++ ){   animate(lis[i],tempArr[i],function(){    onOff = true;    console.log(onOff);   });   };  };  // 设置animate函数  function animate(obj,json,fn){   clearInterval(obj.timer);   obj.timer = setInterval(function(){   var flog = true ;   for( k in json ){    if( k === "zIndex" ){    obj.style[k] = json[k];     }else if( k === "opacity" ){    var leader = getStyle(obj,k) * 100 ;    var target = json[k] * 100 ;    var step = ( target - leader ) / 10 ;    step = step > 0 ? Math.ceil( step ) : Math.floor( step ) ;    // 浮点数判断相等时是不准确的    // 所以不能写leader = ( leader + step )/100;    // 保持leader和target都是整数，便于下面判断相等    leader = leader + step ;    obj.style[k] = leader / 100;    }else{    var leader = parseInt( getStyle(obj,k) ) || 0 ;    var target = json[k];    var step = ( target - leader ) / 10 ;    step = step > 0 ? Math.ceil( step ) : Math.floor( step ) ;    leader = leader + step ;     obj.style[k] = leader + "px";    };    if( leader !== target ){    flog = false ;    };   };   console.log(flog);   if( flog ){    clearInterval( obj.timer );    if( fn ){    fn();    };   };   }, 15);  };  // 设置getStyle函数，获取计算后的样式  function getStyle(obj,attr){   if( window.getComputedStyle ){   return window.getComputedStyle(obj,null)[attr];   }else{   return obj.currentStyle[attr];   };  };  })(window)

以上就是小编为大家带来的使用JavaScript怎么编写一个旋转木马轮播图效果的全部内容了，希望大家多多支持创新互联建站！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、建站服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


文章名称：使用JavaScript怎么编写一个旋转木马轮播图效果-创新互联
URL分享：http://jkwzsj.com/article/cdcogj.html

其他资讯