13518219792

使用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://njwzjz.com/article/gpjijh.html

其他资讯