原生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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
Vue简单实现原理详解
May 07 Javascript
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
如何分别全角和半角以避免乱码
2006/10/09 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
python进程与线程小结实例分析
2018/11/11 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python装饰器用法实例总结
2018/05/26 Python
对python函数签名的方法详解
2019/01/22 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python 中Operator模块的使用
2021/01/30 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
strstr()的简单实现
2013/09/26 面试题
《要下雨了》教学反思
2014/02/17 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
锦旗标语大全
2014/06/23 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
会计人员演讲稿
2014/09/11 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
小学班长竞选稿
2015/11/20 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS