定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; } #box1{ width: 100px; height: 100px; background-color: burlywood; position: absolute; } #box2{ width: 100px; height: 100px; background-color: aqua; position: absolute; top: 200px; } </style> <!-- <script src="./JS文件/tools.js"></script> --> <script> window.onload = function(){ var btn01 = document.getElementById("btn01"); var btn02 = document.getElementById("btn02"); var btn03 = document.getElementById("btn03"); var btn04 = document.getElementById("btn04"); var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); btn01.onclick = function(){ // alert() move(box1,"left",800,30); }; btn02.onclick = function(){ // alert() move(box1,"left",0,30); }; btn03.onclick = function(){ // alert() move(box2,"left",800,10); }; btn04.onclick = function(){ // alert() move(box2,"width",800,10,function(){ move(box2,"height", 400, 10,function(){ move(box2,"top", 0, 10, function(){ move(box2,"width",200 , 10); }); }); }); }; }; /* 创建一个可以执行简单动画的样式 参数： obj 要执行动画的对象 attr 要执行动画的样式 target 执行动画的目标位置 speed 移动速度 callback 回调函数，这个函数将会在动画执行完毕后执行 */ function move(obj,attr, target,speed,callback){ // 关闭一个定时器 clearInterval(obj.timer) var current = parseInt(getStyle(obj, attr)); // alert(getStyle(obj, attr)) if(current > target){ speed = -speed; } obj.timer = setInterval(function(){ var oldValue = parseInt(getStyle(obj, attr)); var newValue = oldValue + speed; // 判断newValue 是否小于target，若小于向左移动 // 判断newValue 是否大于target，若大于向右移动 if((speed < 0 && newValue < target) || (speed > 0 && newValue >target)){ newValue = target; } obj.style[attr] = newValue +"px"; // 设置当变化达到想要效果后停止 if(newValue == target){ clearInterval(obj.timer); // 动画结束后执行回调函数 callback && callback(); } },30); // 定义一个函数，用来获取指定元素的当前样式 // obj 要获取样式的名称 // name 要获取的样式名 function getStyle(obj ,name){ // if (window.getComputedStyle){ return getComputedStyle(obj, null)[name]; } else{ return obj.currentStyle[name]; } }; }; </script> </head> <body> <button id="btn01">点击按钮以后box1向右移动</button> <button id="btn02">点击按钮以后box1向左移动</button> <button id="btn03">点击按钮以后box2向右移动</button> <button id="btn04">测试按钮</button> <br><br> <div id="box1"></div> <div id="box2"></div> </body> </html>
轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../CSS/reset.css"> <style> #outer{ width: 220px; height: 200px; margin: 20px auto; padding: 10px 0; background-color: aqua; position: relative; overflow: hidden; } #imgList{ /* 去除项目符号 */ /* list-style: none; */ position: absolute; } #imgList li{ float: left; margin: 0 10px; } #navDiv{ position: absolute; bottom: 25px; } #navDiv a{ float: left; width: 10px; height: 10px; background-color: red; opacity: 0.6; margin: 0 2px; border-radius:50%; } #navDiv a:hover{ background-color: black; } </style> <script src="../js/JS文件/tools.js"></script> <script> window.onload = function(){ var imgList = document.getElementById("imgList"); // 获取页面中所有的img标签 var imgArr = document.getElementsByTagName("img"); // 设置imgList的宽度 imgList.style.width = 220*imgArr.length +"px"; var navDiv = document.getElementById("navDiv"); var outer = document.getElementById("outer"); // 设置navDivde left值 navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 +"px"; var index = 0; var allA = document.getElementsByTagName("a"); allA[index].style.backgroundColor = "black"; // 设置点击圆点，切换图片 for(var i=0; i < allA.length;i++){ allA[i].num = i; allA[i].onclick = function(){ clearInterval(timer); allA[index].style.backgroundColor = ""; // allA[index].style.opacity = "0.6"; // 切换图片 index = this.num; // imgList.style.left = -this.num*220 + "px"; setA(); move(imgList, "left", -220*index,20, function(){ autoChange(); }) // // allA.style.backgroundColor = "red"; } } function setA(){ if(index >= allA.length){ index = 0; imgList.style.left = 0 + "px"; } for (var i = 0; i < allA.length; i++) { if(i == allA.length-1){ allA[0].style.backgroundColor = ""; allA[index].style.backgroundColor = "black"; } allA[i].style.backgroundColor = ""; } allA[index].style.backgroundColor = "black"; }; var timer; // 自动切换 autoChange(); // 创建一个函数，用来开启自动切换图片 function autoChange(){ // 开启定时器 timer = setInterval(function(){ index++; move(imgList, "left", -220*index,20, function(){ setA(); }) },1000) }; }; </script> </head> <body> <div id="outer"> <ul id="imgList"> <li><img src="./img/1.jpg"></li> <li><img src="./img/2.jpg"></li> <li><img src="./img/3.jpg"></li> <li><img src="./img/4.jpg"></li> <li><img src="./img/5.jpg"></li> <li><img src="./img/6.jpg"></li> <li><img src="./img/1.jpg"></li> </ul> <div id="navDiv"> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> </div> </div> </body> </html>
