首页 > 编程入门 文章详情

getComputedStyle()获取元素一切样式属性 缓动动画核心计算公式 轮播图

编程入门 行业动态 更新时间:2024-10-22 16:46:41

getComputedStyle()获取元素一切<a href=https://www.elefans.com/category/jswz/34/1771146.html style=样式属性 缓动动画核心计算公式 轮播图"/>

getComputedStyle()获取元素一切样式属性 缓动动画核心计算公式 轮播图

01-getComputedStyle()获取元素一切样式属性

  元素属性操作              	特点                             	应用场景   点语法                 	可以修改任意样式，无法获取行外样式              	修改元素样式 attribute           	操作自定义样式                        	操作自定义样式getComputedStyle()  	不可以修改样式，可以获取任意样式（行内+行外）        	获取元素样式 element.currentStyle	与getComputedStyle一致（仅限IE8及以前使用）	获取元素样式
  • 语法： window.getComputedStyle(元素,伪元素)
    • 返回值：对象类型（存储元素一切样式属性）
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>标题</title><style>.one {width: 100px;background-color: pink;border: 10px solid green;padding: 10px;margin: 0 auto;position: relative;left: 0px;top: 50px;}.one::after {content: "哈哈哈";background-color: blue;}</style>
</head>
<body>
<div class="one" id="box" style="height: 100px"></div><script>let box = document.getElementById('box');/*1.点语法特点 a.只能获取行内，无法获取行外b.获取的是string，带单位c.既可以获取，也可以修改*/console.log(box.style.height);//100pxconsole.log(box.style.width);//空字符串box.style.width = '500px';/*2. getComputedStyle() 获取元素一切样式属性 a.既可以获取行内，也可以获取行外b.获取的是string，带单位c.只能获取不能修改*//*2.getComputedStyle() 获取元素一切样式属性 第一个参数：元素第二个参数：伪元素   一般不传或者传null返回值： CSSStyleDeclaration 对象：存储元素一切样式属性*/let style =  window.getComputedStyle(box,null);console.log(style);console.log(style.backgroundColor);console.log(style.padding);console.log(style.border);console.log(style.width);style.width = '1000px';//程序报错 只能获取不能修改/*3.三种语法操作元素属性总结a.点语法： 修改元素属性b. getComputedStyle():获取元素属性c.attribute: 操作自定义属性*/</script>
</body>
</html>

02-缓速动画封装

1.1-缓动动画介绍

  • 缓动动画核心计算公式： 本次需要移动距离 = (目标距离 - 当前距离)/10
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>#box {width: 100px;height: 100px;background-color: red;position: absolute;left: 50px;top: 50px;}</style>
</head>
<body><input type="button" value="匀速移到400" id="move400"/>
<input type="button" value="缓动移到400" id="move800"/><div id="box"></div></body><script>/*1.介绍现实世界物体运动两种方式* 匀速运动：我们封装的动画，每一步移动的距离一样，相当于物体匀速运动* 加速运动：移动越来越快/原来越慢，每一步移动的距离不一样，相当于物体的加速度运动2.缓动动画：指的是元素的移动速度越来越慢的动画（用户体验优于匀速动画）* 匀速动画在到达终点时会突然停止，不符合现实世界物体的运动规律3.缓动动画核心原理公式：  本次移动距离 = (目前距离 - 当前距离)/10移动次数         目标位置          缓动基数      当前位置   本次移动距离1                   400                10                0               （400-0）/10 = 402                   400                10                40               （400-40）/10 = 363                   400                10                76               （400-76）/10 = 32.4（向上取整得到33）4                   400                10                109               （400-109）/10 = 29.1（向上取整得到30）...............n                   400                   10                397                 (400-397)/10 = 0.3(向上取整得到1)n+1                400                   10                398                 (400-398)/10 = 0.2(向上取整得到1)n+2                400                   10                399                 (400-399)/10 = 0.1(向上取整得到1)4.缓动动画特点* （1）每次移动距离不同，如果为小数，一般需要取整（因为一般开发中像素单位都给整数）* （2）不需要边界检测，因为到了最后面移动距离都是1个像素，但是需要判断是否达到终点来清除定时器*/let box = document.getElementById('box');let timeID;/*缓动动画*/document.getElementById('move800').onclick = function (  ) {//先清除以前的定时器clearInterval(timeID);//开始缓动timeID = setInterval(function (  ) {//(1）获取用户当前位置let currentLeft = box.offsetLeft;//(2) 计算本次需要运动的距离let step = (400 - currentLeft)/10;//由于除法可能会得到小数，而一般像素的最小单位是1px，所以我们做一个向上取整step = Math.ceil(step);//(3)移动currentLeft += step;box.style.left = currentLeft + 'px';//缓动动画无需边界检测，因为到了最后面移动的距离都是1px，直到到达重点//（4）到达终点清除定时器if(currentLeft == 400){clearInterval(timeID);}},50)}//1.复习匀速动画的特点document.getElementById('move400').onclick = function (  ) {//先清除以前的定时器clearInterval(timeID);//开始动画timeID = setInterval(function (  ) {//(1)获取用户当前的位置let currentLeft = box.offsetLeft;//(2)定义一个匀速移动的距离let speed = 10;//(3)每一次运动的距固定currentLeft += speed;box.style.left = currentLeft + 'px';//(4)边界检测// 为什么要有边界检测：因为每一次移动的距离是固定的，无论当前位置距离目标位置有多远（1px），本次运动距离固定（10px）if(currentLeft >= 400){box.style.left = '400px';//到达终点，清除定时器clearInterval(timeID);}},50);}
</script>
</html>

1.2-移动距离不限01

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>#box {width: 100px;height: 100px;background-color: red;position: absolute;left: 50px;top: 50px;}</style>
</head>
<body><input type="button" value="缓动移到400" id="move400"/>
<input type="button" value="缓动移到800" id="move800"/><div id="box"></div></body><script>/*本小节封装实现需求：（1）移动距离不限*/let box = document.getElementById('box');document.getElementById('move400').onclick = function (  ) {animationSlow(400);}document.getElementById('move800').onclick = function (  ) {animationSlow(800);}let timeID;function animationSlow ( target ) {//1.清除之前的定时器clearInterval(timeID);//2.开始移动timeID = setInterval(function (  ) {//2.1 获取元素当前位置let currentLeft = box.offsetLeft;//2.2 计算本次需要运动距离let step = (target - currentLeft)/10;//2.3 移动currentLeft += step;box.style.left = currentLeft + 'px';//2.4 终点检测：到达终点清除定时器if(currentLeft == target){clearInterval(timeID);}},50);}
</script>
</html>

1.3-移动元素不限02

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>#box {width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 50px;}#box1 {width: 100px;height: 100px;background-color: green;position: absolute;left: 0px;top: 200px;}</style>
</head>
<body><input type="button" value="缓动移到400" id="move400"/>
<input type="button" value="缓动移到800" id="move800"/><div id="box"></div>
<div id="box1"></div><script>/*本小节解决问题：移动元素不限  --函数参数*/let box = document.getElementById('box');let box1 = document.getElementById('box1');//缓动移到400document.getElementById('move400').onclick = function(){animationSlow(box, 400);};//缓动移到800document.getElementById('move800').onclick = function (  ) {animationSlow(box1,800);};/*** 缓动动画* @param ele 要移动的元素* @param target 要移动的目标距离*/function animationSlow (ele,target  ) {//1.先清除之前的定时器，以本次移动为准clearInterval(ele.timeID);//2.开始本次移动ele.timeID = setInterval(function (  ) {//2.1 先获取当前位置let currentLeft = ele.offsetLeft;//2.2 计算本次移动距离 = (目标位置 - 当前位置)/10let step = (target - currentLeft)/10;//取整:step = Math.ceil(step);//2.3 开始移动currentLeft += step;ele.style.left  = currentLeft + 'px';//2.4 终点检测if (currentLeft == target){clearInterval(ele.timeID);}},50);};
</script>
</body>
</html>

1.4-移动方向不限03

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>#box {width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 50px;}</style>
</head>
<body><input type="button" value="缓动移到400" id="move400"/>
<input type="button" value="缓动移到800" id="move800"/><div id="box"></div><script>/*本小节解决问题：移动方向不限思考题（发现问题）： 1.为什么缓动动画可以自动的实现从左往右与从右往左2.为什么从左往右没有误差，而从右往左有误差分析问题：从左往右： 目标位置  > 当前位置   （1）step = (目标位置 - 当前位置)/10  是正数  （2）Math.ceil(0.3) = 1从右往左： 目标位置   <  当前位置   （1）step = (目标位置 - 当前位置)/10  是负数  (2)Math.ceil(-0.9) = 0  Math.floor(-0.9) = -1解决问题 ： 如果step是正数：则向上取整如果step是负数：则向下取整*/let box = document.getElementById('box');//缓动移到400document.getElementById('move400').onclick = function(){animationSlow(box, 400);};//缓动移到800document.getElementById('move800').onclick = function (  ) {animationSlow(box,800);};/*** 缓动动画* @param ele 要移动的元素* @param target 要移动的目标距离*/function animationSlow (ele,target  ) {//1.先清除之前的定时器，以本次移动为准clearInterval(ele.timeID);//2.开始本次移动ele.timeID = setInterval(function (  ) {//2.1 先获取当前位置let currentLeft = ele.offsetLeft;//2.2 计算本次移动距离 = (目标位置 - 当前位置)/10let step = (target - currentLeft)/10;//取整:step = step>0?Math.ceil(step):Math.floor(step)// if (step>0){//     step = Math.ceil(step);// }else{//     step = Math.floor(step);// }//2.3 开始移动currentLeft += step;ele.style.left  = currentLeft + 'px';//2.4 终点检测if (currentLeft == target){clearInterval(ele.timeID);}},50);};
</script>
</body>
</html>

1.5-移动属性不限04

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style>#box {width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 50px;}</style>
</head><body><input type="button" value="左右移动到800" id="move400" /><input type="button" value="上下移动到400" id="move800" /><div id="box"></div><script>/*本小节解决问题：移动属性不限 */let box = document.getElementById('box');//水平移动到400document.getElementById('move400').onclick = function () {animationSlow(box, 400, 'left');};//上下移动到400document.getElementById('move800').onclick = function () {animationSlow(box, 400, 'top');};/**缓动动画封装* @parma: ele:移动元素* @parma: target:目标位置* @parma: attr: 属性名字符串*/function animationSlow(ele, target, attr) {//1.先清除以前的定时器，以本次为准clearInterval(ele.timeID);//2.开始本次移动ele.timeID = setInterval(function () {//2.1.获取元素当前位置//注意点： getComputerStyle获取的是字符串，需要使用parseInt转成number类型let current = parseInt(getComputedStyle(ele)[attr]);//2.2.计算本次移动距离 = （目标位置 - 当前位置）/10let step = (target - current) / 10;//取整：  step正数：向上取整 从左往右   step是负数：从下取整 从右往左step = step > 0 ? Math.ceil(step) : Math.floor(step);//2.3.开始移动current += step;ele.style[attr] = current + 'px';//2.4.终点检测if (current == target) {clearInterval(ele.timeID);}}, 20);};</script>
</body></html>

03-轮播图

1.1-完整思路介绍

  • 第一步：完成轮播图事件的添加 ：用一个全局遍历index记录当前需要展示的图片的索引
    • （1）鼠标移入移出事件：当鼠标移入轮播图时显示左右两边上一页下一页按钮，移出时隐藏
    • （2）上一页下一页按钮点击事件
      • 点击下一页:index++
      • 点击上一页:index–
    • （3）页码点击事件
  • 第二步：完成上一页和下一页
    • （1）点击移动之前给ul添加边界检测：否则点击下一页会无限往右滚动
    • （2）修改当前索引（自增/自减），索引表示的是当前ul应该展示第几张图片
    • （3）移动ul（目标距离 = -index * screen的宽度）
    • （4）页码保持同步（当前显示的是第几张图片，下方页码对应索引高亮）
  • 第三步：完成无限轮播 核心思想：n+1
    • （1）常规思路：图片滚动时，当滚动到最后一张时，我们偷偷的快速改变ul的位置到第一张（不要动画，瞬间改变）
      • ul.style.left = ‘0px’;//ul回到初始位置
      • index = 0;//index恢复到0
    • （2）问题发现：这种方式可以实现无限轮播，但是在下一轮无限的时候第一张会被跳过去
      • 原因：我们手动改变了index为0，而动画又需要index+1，所以会错过index为0的那一张
    • （3）解决方案：我们在最后一张图片的后面加上第一张图片（第6张）可以让用户看到滚动效果，然后滚动到第六张时，再改变ul回到初始位置。
      • 好处：（1）用户可以看到滚动效果，不影响体验 （2）刚好第6张与第一张是同一张图片，快速改变位置不会造成动画的闪现
    • (4)当图片index为最后一张的的时候，页码应该显示第一个
      • 因为最后一张图片第一张是同一张图片
  • 第四步：自动无限轮播
    • 功能原理介绍：相当于每隔一段时间自动点击下一页按钮，代码逻辑完全不变
    • 思路分析：
      • （1）将轮播代码封装成一个函数
      • （2）开启定时器，每隔一段时间执行这个函数
      • （3）鼠标移入时清除定时器，移出时开启定时器

1.2-第一步：获取页面元素、注册事件

第一步：完成轮播图事件的添加 ：用一个全局变量index记录当前需要展示的图片的索引

  • （1）鼠标移入移出事件：当鼠标移入轮播图时显示左右两边上一页下一页按钮，移出时隐藏
  • （2）上一页下一页按钮点击事件
    • 点击下一页:index++
    • 点击上一页:index–
  • （3）页码点击事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;/*overflow: hidden;*/position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 3000px;}#arr {display: none;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head>
<body>
<div class="all" id='box'><div class="screen"><ul><li><img src="images/01.jpg" width="500" height="200"/></li><li><img src="images/02.jpg" width="500" height="200"/></li><li><img src="images/03.jpg" width="500" height="200"/></li><li><img src="images/04.jpg" width="500" height="200"/></li><li><img src="images/05.jpg" width="500" height="200"/></li></ul><ol><li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div><div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div><script src="animation.js"></script><script>/*第二步：完成上一页下一页*///1.获取页面元素let box = document.getElementById ( "box" )//最外面大盒子 （有边框）let screen = document.getElementsByClassName ( "screen" )[ 0 ]//轮播图可视区域盒子let ul = screen.children[0];//轮播图列表ulconsole.log ( screen.children );let arr = document.getElementById('arr');//上一页下一页盒子let left = document.getElementById('left');//上一页let right = document.getElementById('right');//下一页//2.注册事件//2.1 鼠标移入boxbox.onmouseover = function (  ) {//3.事件处理 : 显示上一页下一页arr.style.display = 'block';};//2.2 鼠标移出boxbox.onmouseout = function (  ) {//3.事件处理：隐藏上一页下一页arr.style.display = 'none';};let index = 0;//声明变量记录当前显示图片的下标//2.3 下一页right.onclick = function (  ) {//3.事件处理 ：index++;//下一页console.log ( index );};//2.4 上一页left.onclick = function (  ) {//3.事件处理 :index--;//上一页console.log ( index );};//2.5 页码点击事件for(let i = 0;i<ol.children.length;i++){ol.children[i].onclick = function (  ) {//3.事件处理alert(1111);}}
</script></body>
</html>

1.3-第二步：完成上一页下一页点击事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;/*overflow: hidden;*/position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 3000px;}#arr {display: none;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head>
<body>
<div class="all" id='box'><div class="screen"><ul><li><img src="images/01.jpg" width="500" height="200"/></li><li><img src="images/02.jpg" width="500" height="200"/></li><li><img src="images/03.jpg" width="500" height="200"/></li><li><img src="images/04.jpg" width="500" height="200"/></li><li><img src="images/05.jpg" width="500" height="200"/></li></ul><ol><li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div><div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div></body><script src="animation.js"></script><script>/*第一步：获取页面元素，注册事件*///1.获取页面元素let box = document.getElementById ( "box" )//最外面大盒子 （有边框）let screen = document.getElementsByClassName ( "screen" )[ 0 ]//轮播图可视区域盒子let ul = screen.children[0];//轮播图列表ulconsole.log ( screen.children );let arr = document.getElementById('arr');//上一页下一页盒子let left = document.getElementById('left');//上一页let right = document.getElementById('right');//下一页//2.注册事件//2.1 鼠标移入boxbox.onmouseover = function (  ) {//3.事件处理 : 显示上一页下一页arr.style.display = 'block';};//2.2 鼠标移出boxbox.onmouseout = function (  ) {//3.事件处理：隐藏上一页下一页arr.style.display = 'none';};let index = 0;//声明变量记录当前显示图片的下标//2.3 下一页right.onclick = function (  ) {//3.事件处理 ：//3.1 如果是最后一页，则不滚动if (index == ul.children.length -1){return;};//3.2 下一页index++;//下一页//3.3 开始滚动animationMove(ul, - index*screen.offsetWidth);console.log ( index );};//2.4 上一页left.onclick = function (  ) {//3.事件处理 ://3.1 如果是第一页，则不滚动if (index == 0){return;};//3.2 上一页index--;//上一页//3.3 开始滚动animationMove(ul, -index*screen.offsetWidth );console.log ( index );};//2.5 页码点击事件for(let i = 0;i<ol.children.length;i++){ol.children[i].onclick = function (  ) {//3.事件处理alert(1111);}}
</script>
</html>

1.4-第三步：完成无限轮播

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 3000px;}#arr {display: none;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head>
<body>
<div class="all" id='box'><div class="screen"><ul><li><img src="images/01.jpg" width="500" height="200"/></li><li><img src="images/02.jpg" width="500" height="200"/></li><li><img src="images/03.jpg" width="500" height="200"/></li><li><img src="images/04.jpg" width="500" height="200"/></li><li><img src="images/05.jpg" width="500" height="200"/></li><li><img src="images/01.jpg" width="500" height="200"/></li></ul><ol><li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div><div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div></body><script src="animation.js"></script><script>/*第三步：完成无限轮播1.提出假设：  当图片是最后一页的时候： （1）瞬间将ul的位置修改为第一张  （2）index变成0发现问题： 没有第五张滚动到第一张的动画，并且会从第一张滚动到第二张分析问题： 直接修改ul位置从第五张到第六张，是一个瞬间的过程，没有动画解决问题： 将第一张图片li放到ul的最后一张去。（1）当从第五张滚动到第六张的时候，由于此时index并不是最后一张。所以有动画（2）当从第六张（最后一张）直接修改ul为第一张的时候，两张是同一张，实现无缝对接*///1.获取页面元素let box = document.getElementById ( "box" )//最外面大盒子 （有边框）let screen = document.getElementsByClassName ( "screen" )[ 0 ]//轮播图可视区域盒子let ul = screen.children[0];//轮播图列表ulconsole.log ( screen.children );let arr = document.getElementById('arr');//上一页下一页盒子let left = document.getElementById('left');//上一页let right = document.getElementById('right');//下一页//2.注册事件//2.1 鼠标移入boxbox.onmouseover = function (  ) {//3.事件处理 : 显示上一页下一页arr.style.display = 'block';};//2.2 鼠标移出boxbox.onmouseout = function (  ) {//3.事件处理：隐藏上一页下一页arr.style.display = 'none';};let index = 0;//声明变量记录当前显示图片的下标//2.3 下一页right.onclick = function (  ) {//3.事件处理 ：//3.1 如果是最后一页，(1)修改ul位置为第一张  （2）index = 0if (index == ul.children.length -1){ul.style.left = '0px';index = 0;//修改index从0开始无限滚动};//3.2 下一页index++;//下一页//3.3 开始滚动animationMove(ul, - index*screen.offsetWidth);console.log ( index );};//2.4 上一页left.onclick = function (  ) {//3.事件处理 ://3.1 如果是第一页，（1）修改ul位置为最后一张  （2）index = 最后一张下标if (index == 0){ul.style.left = -(ul.children.length-1)*screen.offsetWidth + 'px';index = ul.children.length-1;};//3.2 上一页index--;//上一页//3.3 开始滚动animationMove(ul, -index*screen.offsetWidth );console.log ( index );};</script>
</html>

1.5-第四步：完成自动轮播

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 3000px;}#arr {display: none;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head>
<body>
<div class="all" id='box'><div class="screen"><ul><li><img src="images/01.jpg" width="500" height="200"/></li><li><img src="images/02.jpg" width="500" height="200"/></li><li><img src="images/03.jpg" width="500" height="200"/></li><li><img src="images/04.jpg" width="500" height="200"/></li><li><img src="images/05.jpg" width="500" height="200"/></li><li><img src="images/01.jpg" width="500" height="200"/></li></ul><ol><li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div><div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div></body><script src="animation.js"></script><script>/*本小节：自动轮播1.页面一加载：开启自动模式 （定时器每隔3s,自动执行下一页代码）*///1.获取页面元素let box = document.getElementById ( "box" )//最外面大盒子 （有边框）let screen = document.getElementsByClassName ( "screen" )[ 0 ]//轮播图可视区域盒子let ul = screen.children[0];//轮播图列表ulconsole.log ( screen.children );let arr = document.getElementById('arr');//上一页下一页盒子let left = document.getElementById('left');//上一页let right = document.getElementById('right');//下一页//一：自动轮播：开启自动模式 （定时器每隔3s,自动执行下一页代码）let timeID = setInterval(function (  ) {nextPage();},3000);//2.注册事件//2.1 鼠标移入boxbox.onmouseover = function (  ) {//3.事件处理 : 显示上一页下一页arr.style.display = 'block';//二：自动轮播：鼠标移入box，切换手动模式clearInterval(timeID);};//2.2 鼠标移出boxbox.onmouseout = function (  ) {//3.事件处理：隐藏上一页下一页arr.style.display = 'none';//三：自动轮播： 鼠标移出box，切换自动模式timeID = setInterval(function (  ) {nextPage();},3000);};let index = 0;//声明变量记录当前显示图片的下标//2.3 下一页right.onclick = function (  ) {//3.事件处理 ：nextPage();};function nextPage (  ) {//3.1 如果是最后一页，(1)修改ul位置为第一张  （2）index = 0if (index == ul.children.length -1){ul.style.left = '0px';index = 0;//修改index从0开始无限滚动};//3.2 下一页index++;//下一页//3.3 开始滚动animationMove(ul, - index*screen.offsetWidth);console.log ( index );}//2.4 上一页left.onclick = function (  ) {//3.事件处理 ://3.1 如果是第一页，（1）修改ul位置为最后一张  （2）index = 最后一张下标if (index == 0){ul.style.left = -(ul.children.length-1)*screen.offsetWidth + 'px';index = ul.children.length-1;};//3.2 上一页index--;//上一页//3.3 开始滚动animationMove(ul, -index*screen.offsetWidth );};</script>
</html>

04-轮播图 实现方式二

window.onload = function () {(function () {// 定义一个数组：保存需要用到的图片路径let imgs = ['images/laugh01.gif', 'images/laugh02.gif', 'images/laugh03.gif', 'images/laugh04.gif', 'images/laugh05.gif', 'images/laugh43.gif'];//获取元素let box = document.getElementById('box');let screen = document.querySelector('.screen');let ul = screen.querySelector('ul');let ol = screen.querySelector('ol');let arr = document.getElementById('arr');let left = document.getElementById('left');let right = document.getElementById('right');// 页码生成下标imgs.forEach(function (item, index) {let olli = document.createElement('li');olli.innerText = index + 1;if (index == 0) olli.classList.add('current');ol.appendChild(olli);})// 获取页码下标let ollis = ol.querySelectorAll('li');// 声明个全局变量 存储当前轮播图片下标let index = 0;// 自动轮播let timer = setInterval(() => { moveRight(); }, 1500);// 鼠标移入box 显示左右箭头 自动轮播可以关闭box.onmouseover = function () {arr.style.display = 'block';clearInterval(timer);}// 鼠标移出box 隐藏左右箭头  自动轮播再次开启box.onmouseout = function () {arr.style.display = '';timer = setInterval(() => { moveRight(); }, 1500);}// 核心事件left.onclick = moveLeft;right.onclick = moveRight;// 修改页码样式function upDataPageNember(index) {// 遍历所有页码 清除样式 等于index的li才添加样式 (排他思想)ollis.forEach((li, i) => {li.classList.remove('current');if (i == index) li.classList.add('current');});}// 事件停止function stop() {left.onclick = null;right.onclick = null;ollis.forEach(li => { li.onclick = null });}// 事件开始function start() {left.onclick = moveLeft;right.onclick = moveRight;ollis.forEach((li, i) => {li.onclick = function () {if (i > index) {index = i - 1;moveRight()} else if (i < index) {index = i + 1;moveLeft()}};});}// 图片向左移动function moveLeft() {stop();// 点击左箭头 图片左移/*实现思路拿当前li 克隆一份  (或新建一个li )修改图片 上一张添加到ul中: inserBefore(新,旧)瞬移ul-500px 隐藏第一张图片动画: ul向左移动到0 */let oldLi = ul.firstElementChild;let li = document.createElement('li');index = index == 0 ? imgs.length - 1 : index - 1;li.innerHTML = `<img src=${imgs[index]} width="500" height="200" />`;// 创建一个li 加到ul第一个li前面ul.insertBefore(li, oldLi);ul.style.left = -screen.offsetWidth + 'px';console.log(ul.style.left)animateSlow(ul, 0, 'left', function () {// ul原有的li 寿终正寝 销毁oldLi.remove();// 点击事件可以开启  把页码的点击事件也开启start();})// 修改页码upDataPageNember(index)}// 图片向右移动function moveRight() {stop();// 点击右箭头 图片左移/*实现思路:拿当前li 克隆一份修改图片 : 下一张添加到ul中 : appendChild()动画: ul向左移动一个屏幕宽度  -screen.offsetWidth(即li向右走了)删除第一个li (此时用户已经看不见这个li)动画结束 ul瞬间回到0px*/let li = document.createElement('li');index++;if (index == imgs.length) index = 0;// index = index == imgs.length ? '0' : index + 1;li.innerHTML = `<img src=${imgs[index]} width="500" height="200" />`;// 创建一个li 追加到ul的li后面ul.appendChild(li);animateSlow(ul, -screen.offsetWidth, 'left', function () {// ul原有的li 寿终正寝 销毁ul.firstElementChild.remove();ul.style.left = 0;start();  //点击事件可以开启 把页码的点击事件也开启})// 修改页码upDataPageNember(index)}})();
}

更多推荐

getComputedStyle()获取元素一切样式属性 缓动动画核心计算公式 轮播图

本文发布于:2023-07-28 18:41:28，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1277521.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：样式   计算公式   属性   元素   核心

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表