原生js实现旋转木马轮播图效果

 

 *{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

  animate(lis[i],tempArr[i],function(){

   onOff=true;

   console.log(onOff);

  });

  };

 };

 // 设置animate函数

 function animate(obj,json,fn){

  clearInterval(obj.timer);

  obj.timer=setInterval(function(){

  varflog=true;

  for( k in json ){

   if( k === "zIndex" ){

   obj.style[k] = json[k];

   }else if( k === "opacity" ){

   varleader=getStyle(obj,k) * 100 ;

   vartarget=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)