【JavaScript】DOM (四) 轮播图超详细讲解
文章目录
- 1.定时事件
- 2.图片定时切换
- 3.元素移动
- 4.延时调用
- 5.完整代码
1.定时事件
javaScript 一个设定的时间间隔之后来执行代码我们称之为计时事件。
setInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器1</title>
<script type="text/javascript">
window.onload = function(){
var myDiv = document.getElementById("myDiv");
var number = 0;
setInterval(function(){
myDiv.innerHTML = number++;
}, 1000)
}
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
但是我们的定时器有可能不会一直执行，我们要想关闭它，可以借助clearInterval清除。
<script type="text/javascript">
window.onload = function(){
var myDiv = document.getElementById("myDiv");
var number = 0;
var timer = setInterval(function(){
myDiv.innerHTML = number++;
if(number === 5) {
clearInterval(timer);
}
}, 1000)
}
</script>
2.图片定时切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
<style type="text/css">
#container {
width: 300px;
margin: 50px auto;
padding: 10px;
background-color: green;
}
div img {
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var img = document.getElementsByTagName("img")[0];
var imgArr = ["image/img32.jpg", "image/img33.jpg", "image/img34.jpg", "image/img35.jpg"];
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var index = 0;
var timer;
start.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
index++;
img.src = imgArr[index % (imgArr.length)];
},1000)
}
stop.onclick = function(){
clearInterval(timer);
}
}
</script>
</head>
<body>
<div id="container">
<img src="image/img32.jpg" alt="图片无法显示"/>
<button id="start">开始</button>
<button id="stop">停止</button>
</div>
</body>
</html>
我们注意到我们在start.onclick = function(){} 中设置了clearInterval(timer);，这是为了防止一个用户多次点击开始按钮，导致启动多个定时器，造成图片变化地越来越快。
3.元素移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div移动</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
var dir = 39;
var speed = 10;
setInterval(function(){
switch(dir) {
case 37:
box.style.left = box.offsetLeft - speed + "px";
break;
case 38:
box.style.top = box.offsetTop - speed + "px";
break;
case 39:
box.style.left = box.offsetLeft + speed + "px";
break;
case 40:
box.style.top = box.offsetTop +speed + "px";
break;
}
}, 400);
document.onkeydown = function(event){
event = event || window.event;
if(event.ctrlKey) {
speed = 50;
} else if(event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40) {
dir = event.keyCode;
} else {
speed = 10;
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
说明：
Ctrl: 加速
除了方向键外的其他键：减速
4.延时调用
setTimeout( )
5.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
/*
* 清楚默认样式
*/
* {
margin: 0;
padding: 0;
}
#outer {
/*设置宽高*/
width: 520px;
height: 333px;
/*居中*/
margin: 50px auto;
/*设置背景颜色*/
background-color: green;
/*设置padding*/
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList {
list-style: none;
position: absolute;
left: 0;
}
#imgList li {
float: left;
margin: 0 10px;
}
#imgList li img {
width: 500px;
height: 333px;
}
#navDiv {
position: absolute;
bottom: 15px;
left: 197px;
}
#navDiv a {
/*设置超链接浮动*/
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
}
#navDiv a:hover {
background-color: black;
}
</style>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">
window.onload = function() {
//获取imgList
var imgList = document.getElementById("imgList");
//获取img
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 520 * imgArr.length + "px";
//设置导航栏居中
//获取导航栏navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//设置超链接特效
var allA = document.getElementsByTagName("a");
var index = 0;
allA[index].style.backgroundColor = "black";
for(var i = 0; i < allA.length; i++) {
//获取点击超链接的索引
allA[i].num = i;
allA[i].onclick = function(){
clearInterval(timer);
index = this.num;
//点击切换图片
//imgList.style.left = -520 * index + "px";
setA();
move(imgList, "left", -520*index, 20, function (){
autoChange();
})
};
}
autoChange();
function setA(){
if(index >= imgArr.length - 1) {
index = 0;
imgList.style.left = 0;
}
for(var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "black";
}
var timer;
function autoChange(){
timer = setInterval(function (){
index++;
index %= imgArr.length;
move(imgList, "left", -520*index, 20, function (){
//修改导航按钮
setA();
})
}, 3000)
}
}
</script>
</head>
<body>
<!--创建一个外部的div,作为大的容器-->
<div id="outer">
<!--创建一个ul, 用于放置图片-->
<ul id="imgList">
<li><img src="image/img32.jpg" alt="图片一"/></li>
<li><img src="image/img33.jpg" alt="图片二"/></li>
<li><img src="image/img34.jpg" alt="图片三"/></li>
<li><img src="image/img35.jpg" alt="图片四"/></li>
<li><img src="image/img32.jpg" alt="图片一"/></li>
</ul>
<div id="navDiv">
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
</div>
</div>
</body>
</html>
包装的工具类：tools.js
/**
*
* @param obj 要执行动画的对象
* @param attr 要执行动画的样式，比如： left, top, width, height
* @param target 执行动画的目标位置
* @param speed 移动的速度（正数向右移动，负数向左移动）
* @param callback 回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback){
clearInterval(obj.timer);
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0向800移动，则speed为正
//如果800向0移动，则speed为负
if(current > target){
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function(){
//获取box1的原来的left
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;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue === target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
callback && callback();
}
}, 30);
}
/**
*
* @param obj 要获取的样式的元素
* @param name 要获取的样式名
* @returns {string|*}
*/
function getStyle(obj, name){
if(window.getComputedStyle){
return getComputedStyle(obj, null)[name];
}else{
return obj.currentStyle[name];
}
}
作者：Beyong
出处：Beyong博客
github地址：https://github.com/beyong2019
本博客中未标明转载的文章归作者Beyong有，欢迎转载，但未经作者同意必须保留此段声明，且在文章明显位置给出原文连接，否则保留追究法律责任的权利。