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

发布时间：2021-02-22 17:58:10 作者：戴恩恩
来源：亿速云阅读：185
本文章向大家介绍使用JavaScript怎么编写一个旋转木马轮播图效果的基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!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>
以上就是小编为大家带来的使用JavaScript怎么编写一个旋转木马轮播图效果的全部内容了，希望大家多多支持亿速云！
使用JavaScript怎么编写一个旋转木马轮播图效果

相关阅读
