js轮播图之旋转木马效果


Posted in Javascript onOctober 13, 2020

本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下

思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换
左旋转:将数组第一个数据删除,然后添加到数组的最后
右旋转:将数组最后一个数据删除,然后添加到数组的开头
先附上效果图,再来实现

js轮播图之旋转木马效果

接下来就是最主要的,封装原生js动画函数

//封装函数获取任意一个元素的任意属性的值(兼容ie8)
function getStyle(element, attr) {
 return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}
//封装js变速动画
function animate(element, json, fn) {
 //每次启动定时器之前先停止
 clearInterval(element.tmId);
 element.tmId = setInterval(function () {
  var flag = true;
  //遍历对象中的每个属性
  for (var attr in json) {
   //执行透明度动画
   if (attr == "opacity") {
    //获取当前元素的属性值
    var current = parseInt(getStyle(element, attr)*100);
    //获取目标值
    var target = json[attr]*100;
    //移动的步数
    var step = (target - current) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    //移动后的值
    current += step;
    element.style[attr] = current / 100;
   } else if (attr == "zIndex") {
    //改变层级属性
    element.style[attr] = json[attr];
   } else {
    //获取当前元素的属性值
    var current = parseInt(getStyle(element, attr));
    //获取目标值
    var target = json[attr];
    //移动的步数
    var step = (target - current) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    //移动后的值
    current += step;
    element.style[attr] = current + "px";
    if (current != target) {
     flag = false;
    }
   }
  }
  if (flag) {
   clearInterval(element.tmId);
   //如果有回调函数就调用
   if (fn) fn();
  }
  // 测试
  // console.log("目标:" + target + "/当前:" + current + "/步数:" + step);
 }, 20);
}

封装完函数,剩下的直接调用就可以了,最后附上旋转木马完整代码?

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>旋转木马轮播图</title>
 <link rel="stylesheet" href="css/css(1).css" rel="external nofollow" />
 <script src="common.js"></script>
 <script>
  var config = [
   {
    width: 400,
    top: 20,
    left: 50,
    opacity: 0.2,
    zIndex: 2
   },//0
   {
    width: 600,
    top: 70,
    left: 0,
    opacity: 0.8,
    zIndex: 3
   },//1
   {
    width: 800,
    top: 100,
    left: 200,
    opacity: 1,
    zIndex: 4
   },//2
   {
    width: 600,
    top: 70,
    left: 600,
    opacity: 0.8,
    zIndex: 3
   },//3
   {
    width: 400,
    top: 20,
    left: 750,
    opacity: 0.2,
    zIndex: 2
   }//4

  ];

  window.onload = function () {
   var flag = true;
   var list = $query("#slide").getElementsByTagName("li");

   function flower() {
    //1、图片散开
    for (var i = 0; i < list.length; i++) {
     //设置每个li的宽,透明度,left,top,zindex
     animate(list[i], config[i], function () {
      flag = true;
     });
    }
   }

   flower();//初始化调用函数
   //按钮的显示与隐藏
   $query("#slide").onmouseover = function () {
    $query("#arrow").style.opacity = "1";
   }
   $query("#slide").onmouseout = function () {
    $query("#arrow").style.opacity = "0";
   }
   //点击切换
   $query("#arrLeft").onclick = function () {
    if (flag) {
     config.unshift(config.pop());
     flower();
     flag = false;
    }
   }
   $query("#arrRight").onclick = function () {
    if (flag) {
     config.push(config.shift());
     flower();
     flag = false;
    }
   }
   //自动切换
   setInterval(function () {
    config.push(config.shift());
    flower();
   }, 2000);
  }
 </script>

</head>
<body>
<div class="wrap" id="wrap">
 <div class="slide" id="slide">
  <ul>
   <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
   <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
   <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
   <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
   <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
  </ul>
  <div class="arrow" id="arrow">
   <a href="javascript:void(0);" class="prev" id="arrLeft"></a>
   <a href="javascript:void(0);" class="next" id="arrRight"></a>
  </div>
 </div>
</div>

</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入了解Node.js中的一些特性
Sep 25 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
Vue中正确使用Element-UI组件的方法实例
Oct 13 #Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 #Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 #Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 #Javascript
react的hooks的用法详解
Oct 12 #Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 #Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
浅析php数据类型转换
2014/01/09 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
使用python实现生成用户信息
2017/03/20 Python
Python控制Firefox方法总结
2019/06/03 Python
如何将json数据转换为python数据
2020/09/04 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
大学生应聘自荐信
2013/10/11 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
个人工作表现评语
2014/04/30 职场文书
红色旅游心得体会
2014/09/03 职场文书
项目转让协议书
2014/10/27 职场文书
组织生活会发言材料
2014/12/15 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
600字作文之感受大自然
2019/11/27 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers