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 相关文章推荐
jQuery 跨域访问问题解决方法
Dec 02 Javascript
jquery构造器的实现代码小结
May 16 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Vue自定义全局弹窗组件操作
Aug 11 Javascript
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系统流量分析的程序
2006/10/09 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
有关php运算符的知识大全
2011/11/03 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
python逆向入门教程
2018/01/15 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python算的上脚本语言吗
2020/06/22 Python
python将数据插入数据库的代码分享
2020/08/16 Python
PyQt实现计数器的方法示例
2021/01/18 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
企业新年寄语
2014/04/04 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
利用js实现简单开关灯代码
2021/11/23 Javascript