定时器
<!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>