<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03DOM版轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
vertical-align: top;
}
.window {
width: 640px;
height: 400px;
border: 2px solid gold;
margin: 20px auto 0;
position: relative;
overflow: hidden;
}
.content {
width: 1280px;
height: 400px;
position: absolute;
top: 0;
font-size: 0;
}
</style>
</head>
<body>
<div class="window">
<div class="content"></div>
</div>
</body>
<script type="text/javascript">
//获取页面元素
var conDiv = document.querySelector(".content");
//当前图片
var currentImg = 1;
//添加图片
createImg();
//自动切换
setInterval(function() {
//控制图片循环
currentImg++;
if (currentImg > 7) {
currentImg = 1;
}
//创建图片
createImg();
var t = 0;
var b = conDiv.offsetLeft;
var c = -640;
var d = 30;
var timer2 = setInterval(function() {
t++;
conDiv.style.left = b + c / d * t + "px";
if (t >= d) {
//清除计时器
clearInterval(timer2);
//删除img
//1, 获取 conDiv 中第一个 img
var firImg = conDiv.childNodes[0];
//2, 删除元素
conDiv.removeChild(firImg);
//调整 left 值
conDiv.style.left = 0;
}
},50);
},2000);
//创建图片函数
function createImg () {
//1, 创建
var img = document.createElement("img");
//2,配置图片属性
img.src = "img/BreakingBad" + currentImg + ".jpg";
img.style.width = "640px";
//3,添加
conDiv.appendChild(img);
}
</script>
</html>
