RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
使用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://lswzjz.com/article/gpjijh.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区大橙子信息咨询工作室
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.lswzjz.com

公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

网站备案号：蜀ICP备2022028542号-13

乐山大橙子建站 乐山网站建设 乐山网站设计 乐山网站制作 成都做网站