1.主要代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>轮播图</title>
<style>
* {
padding: 0;
margin: 0;
}
#outer {
position: relative;
width: 520px;
height: 400px;
margin: 50px auto;
padding: 10px 0;
overflow: hidden;
background-color: pink;
}
#outer #imgList {
position: absolute;
}
#outer #imgList li {
list-style: none;
float: left;
}
#outer #imgList li img {
width: 500px;
height: 400px;
padding-left: 10px;
}
#nav #navList {
position: absolute;
top: 370px;
height: 30px;
text-align: center;
}
#nav ul li {
display: inline-block;
list-style: none;
margin: 5px 10px;
width: 12px;
height: 12px;
cursor: pointer;
background-color: #ffffff;
}
#nav ul li:hover {
background-color: pink;
}
</style>
<script src="../js/tools.js"></script>
<script>
window.onload = function () {
var outer = document.getElementById("outer");
var navList = document.getElementById("navList");
//设置导航栏left值
navList.style.left =
(outer.offsetWidth - navList.offsetWidth) / 2 + "px";
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
//设置轮播栏宽度
imgList.style.width = imgArr.length * 520 + "px";
var li = navList.children;
var i = 0;
li[i].style.backgroundColor = "pink";
for (var j = 0; j < li.length; j++) {
li[j].num = j;
li[j].onclick = function () {
clearInterval(timer);
this.style.backgroundColor = "pink";
li[i].style.backgroundColor = "";
i = this.num;
//imgList.style.left = i * -510 + "px";
move(imgList, "left", 20, -510 * i, function () {
autoChange();
});
};
}
autoChange();
var timer;
function autoChange() {
timer = setInterval(function () {
//如果最后一张图片的索引为0,则把它的left值设为第一张图片的left值,这样就完成了过渡效果
if (i == 0) {
imgList.style.left = 0;
}
li[i].style.backgroundColor = "";
i++;
i = i % imgArr.length;
move(imgList, "left", 100, -510 * i, function () {});
//把第一张图片也放在最后一张图片,把最后一张图片的索引改为0
if (i >= imgArr.length - 1) {
i = 0;
}
li[i].style.backgroundColor = "pink";
}, 1000);
}
};
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="../images/png1.jpg" alt="" /></li>
<li><img src="../images/png2.jpg" alt="" /></li>
<li><img src="../images/png3.jpg" alt="" /></li>
<li><img src="../images/png4.jpg" alt="" /></li>
<li><img src="../images/图片1.png" alt="" /></li>
<li><img src="../images/png1.jpg" alt="" /></li>
</ul>
<div id="nav">
<ul id="navList">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
2.tools.js
//尝试创建一个可以执行简单动画的函数
/*
参数:
obj 要执行动画的对象
attr 要执行动画的样式
target 执行动画的目标位置
speed 速度
callback 回调函数,将会在动画执行完毕以后执行
*/
function move(obj, attr, speed, target, callback) {
clearInterval(obj.timer);
//判断速度的正负值
//如果从0-800移动,则speed为正
//如果从800-0移动,则speed为负
var current = parseInt(getStyle(obj, attr));
if (current > target) {
speed = -speed;
}
obj.timer = setInterval(function () {
var oldValue = getStyle(obj, attr);
var newValue = parseInt(oldValue) + speed;
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);
}
function getStyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
} else {
return obj.currentStyle[name];
}
}