JavaScript|【JavaScript】DOM (四) 轮播图超详细讲解 html5|html|javascript

文章目录

1.定时事件
2.图片定时切换
3.元素移动
4.延时调用
5.完整代码

1.定时事件 javaScript 一个设定的时间间隔之后来执行代码我们称之为计时事件。
setInterval

文章图片

定时器1 - 锐客网 ="text/javascript"> window.onload = function(){ var myDiv = document.getElementById("myDiv"); var number = 0; setInterval(function(){ myDiv.innerHTML = number++; }, 1000) }

文章图片

但是我们的定时器有可能不会一直执行，我们要想关闭它，可以借助clearInterval清除。

="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) }

文章图片

2.图片定时切换

demo2 - 锐客网 ="text/css"> #container { width: 300px; margin: 50px auto; padding: 10px; background-color: green; } div img { width: 300px; height: 200px; } ="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 = https://www.it610.com/article/imgArr[index % (imgArr.length)]; },1000) } stop.onclick = function(){ clearInterval(timer); } } 文章图片

文章图片

我们注意到我们在start.onclick = function(){} 中设置了

clearInterval(timer);

，这是为了防止一个用户多次点击开始按钮，导致启动多个定时器，造成图片变化地越来越快。
3.元素移动

div移动 - 锐客网 ="text/css"> #box { width: 100px; height: 100px; background-color: yellow; position: absolute; } ="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; } } }

文章图片

说明：
Ctrl: 加速
除了方向键外的其他键：减速
4.延时调用 【JavaScript|【JavaScript】DOM (四) 轮播图超详细讲解】setTimeout( )

文章图片

5.完整代码

轮播图 - 锐客网 ="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; } ="text/javascript" src="https://www.it610.com/article/tools.js"> ="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) } } 文章图片文章图片文章图片文章图片文章图片

包装的工具类：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 = https://www.it610.com/article/parseInt(getStyle(obj,attr)); //在旧的基础上增加 var newValue = oldValue + speed; //向左移动时，需要考虑newValue是否小于target //向右移动时，需要考虑newValue是否大于target if((speed < 0 && newValue < target) || (speed> 0 && newValue > target)){ newValue = https://www.it610.com/article/target; } //将新值设置给box1 obj.style[attr] = newValue +"px"; //当元素移动到0px时，使其停止执行动画 if(newValue =https://www.it610.com/article/== 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]; } }