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

2019-11-19 17:24:13

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{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;} </style></head><body> <div id="demo"> <div id="innerht">  <ul>  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=dac666f84f6ad05ec026ad655ea0f159" alt=""></a></li>  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=89c2213f2b614db88b5724b82dafc02a" alt=""></a></li>  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e7969486909c076abf795995bdc3da54" alt=""></a></li>  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b404e53a3f4dd7e97438693e8e2d4082" alt=""></a></li>  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=ed309dded163d172b53154b2046eb1a2" alt=""></a></li>  </ul>  <div id="corrow">  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="btn_lef"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=206927b03b97b194bc04cdcaf0e10a33" height="112" width="76" alt=""></a>  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="btn_rig"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=0e84253cccdf667e293522a0a107eeec" height="112" width="76" alt=""></a>  </div> </div> </div></body><script type="text/javascript"> (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)</script></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：jquery横向纵向鼠标滚轮全屏切换

下一篇：jQuery实现弹窗居中效果类似alert()