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


Posted in Javascript onFebruary 27, 2017

话不多说,请看代码:

<!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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
解读Vue组件注册方式
May 15 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
jQuery实现弹窗居中效果类似alert()
Feb 27 #Javascript
js实现简单的手风琴效果
Feb 27 #Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 #Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 #Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 #Javascript
js 调用百度分享功能
Feb 27 #Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 #Javascript
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP数组实例详解
2016/06/26 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
详解json在php中的应用
2018/09/30 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
列举Python中吸引人的一些特性
2015/04/09 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python学习之os模块及用法
2020/06/03 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
自我鉴定 电子商务专业
2014/01/30 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
明信片寄语大全
2014/04/08 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
新员工入职欢迎词
2015/01/23 职场文书
法定授权委托证明书
2015/06/18 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
PHP中多字节字符串操作实例详解
2021/08/23 PHP