资讯

精准传达 • 有效沟通

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

网站建设 >

查看其它板块

使用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怎么编写一个旋转木马轮播图效果-创新互联
转载来源：http://cdkjz.cn/article/cdcogj.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

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

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

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

在线咨询 提交需求
友情链接 交换友情链接
亮美家企业官网建设成都主机托管成都网站制作成都关键词SEO优化双流做网站成都装修公司服务器机柜顺泽窗帘广安搬家公司

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图