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实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
基于jquery实现五星好评
Nov 18 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
js微信分享接口调用详解
Jul 23 Javascript
JavaScript实现alert弹框效果
Nov 19 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 正则匹配函数体
2009/08/25 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
由Javascript实现的页面日历
2011/11/04 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
JS中数据结构之栈
2019/01/01 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python创建子类的方法分析
2019/11/28 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
公司培训欢迎词
2014/01/10 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
岗位说明书怎么写
2014/07/30 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
公司更名通知函
2015/04/24 职场文书
薪资证明范本
2015/06/19 职场文书
护士工作心得体会
2016/01/25 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫