index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0px;
margin: 0px;
}
#out {
width: 520px;
height: 333px;
background-color: #bfa;
margin: 50px auto;
padding: 10px 0px;
position: relative;
overflow: hidden;
}
#imglist {
list-style: none;
/* width: 2600px; */
position: absolute;
left: 0px;
}
#imglist li {
float: left;
margin: 0px 10px;
}
#navdiv {
position: absolute;
bottom: 15px;
/* left: 200px; */
}
#navdiv a {
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
border-radius: 50%;
}
#navdiv a:hover {
background-color: #686269;
}
</style>
<script src="js/tool.js"></script>
<script>
window.onload = function() {
var img = document.getElementsByTagName("img");
var imglist = document.getElementById("imglist");
imglist.style.width = 520 * img.length + "px";
// 设置导航块居中
var navdiv = document.getElementById("navdiv");
var out = document.getElementById("out");
navdiv.style.left = (out.offsetWidth - navdiv.offsetWidth) / 2 + "px";
var index = 0;
var arra = document.getElementsByTagName("a");
arra[index].style.backgroundColor = "#686269";
// 为每一个超链接添加单机响应事件
for (var i = 0; i < arra.length; i++) {
arra[i].num = i;
arra[i].onclick = function() {
// 当我们手动去切换的时候,去停止轮播图
clearInterval(timer);
// 为每个超链接做标记
index = this.num;
// imglist.style.left = -520 * index + "px";
setA();
move(imglist, "left", -520 * index, 20, function() {
// 手动点击切换结束之后,再次开启定时器。
autoChenge();
});
}
}
autoChenge();
function setA() {
// 判断索引是否是最后一张
if (index >= arra.length) {
index = 0;
//如果为最后一张,直接将imglist的left设置为0,
imglist.style.left = 0;
}
for (var i = 0; i < arra.length; i++) {
// 设置为空,防止设置颜色之后,在内联样式里优先级过高,
arra[i].style.backgroundColor = "";
}
arra[index].style.backgroundColor = "#686269";
}
// 设置定时器
// 定义定时器标识
var timer;
function autoChenge() {
timer = setInterval(function() {
index++;
// %= 算法 判断index的长度是否超过img的长度,如果超过就返回0
index %= img.length;
move(imglist, "left", -520 * index, 20, function() {
setA();
});
}, 3000);
}
}
</script>
<body>
<div id="out">
<ul id="imglist">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
</ul>
<div id="navdiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
tool.js
//实现动画效果
function move(obj, arrtr, target, speed, callback) {
clearInterval(obj.timer);
// 获取当前位置
var current = parseInt(getstyle(obj, arrtr));
// 判断speed正负
// 0-800 向左移
//800-0 向右移
if (current > target) {
speed = -speed;
}
// 将timer作为属性 给自身的obj元素。
obj.timer = setInterval(function() {
var oldvalue = parseInt(getstyle(obj, arrtr));
var newvalue = oldvalue + speed;
// 向左移时,需要判断newvalue是否小于target
// 向右移时,需要判断newvalue是否大于target
if ((speed < 0 && newvalue < target) || (speed > 0 && newvalue > target)) {
newvalue = target;
}
obj.style[arrtr] = newvalue + "px";
if (newvalue == target) {
clearInterval(obj.timer);
// 如果有回调函数就调用,没有则不调用。
callback && callback();
}
}, 20);
// return false;
};
// 获取元素的样式
function getstyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
} else {
return obj.currentStyle[name];
}
}
愿你的坚持终有收获。