资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用JavaScript怎么编写一个旋转木马轮播图效果

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

网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了镇海免费建站欢迎大家使用!




 
 旋转木马特效
 
 *{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怎么编写一个旋转木马轮播图效果的全部内容了,希望大家多多支持创新互联!


名称栏目:使用JavaScript怎么编写一个旋转木马轮播图效果
文章出自:http://cdkjz.cn/article/gpjijh.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220