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 相关文章推荐
javascript 遍历验证所有文本框的值
Aug 27 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
python中assert用法实例分析
2015/04/30 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python hashlib模块的使用示例
2020/10/09 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
教师求职自荐信
2014/03/09 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
校长创先争优承诺书
2014/08/30 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
停水通知
2015/04/16 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python