原生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 相关文章推荐
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
javascript中clone对象详解
Dec 03 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
php 魔术方法详解
2014/11/11 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Python 文件重命名工具代码
2009/07/26 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python多进程原理与用法分析
2018/08/21 Python
python实现汽车管理系统
2018/11/30 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
Python devel安装失败问题解决方案
2020/06/09 Python
优秀纪检干部材料
2014/08/27 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
邀请函范文
2015/02/02 职场文书
初中语文教学随笔
2015/08/15 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
MySQL实现配置主从复制项目实践
2022/03/31 MySQL