使用js实现一个定时器自动轮播图片（‘注’ 不是轮播图）
思路
前置；要先用html和css做好盒子，然后把图片放在盒子里面。
1.获取想要展示的图片
2.然后把那些图片放在一个新数组里面
3.用定时器，并且用在定时器中控制时间去改变显示的图片的地址
4.只要我们把数组顺序放好，然后就看起来像自动切换图片，并且还会走动的效果
1.png
2.png
3.png
var img = document.getElementById("img");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var img4 = document.getElementById("img4");
var img5 = document.getElementById("img5");
var img6 = document.getElementById("img6");
var imgArr = ["img/3d1.jpg", "img/3d2.jpg", "img/3d3.jpg", "img/3d4.jpg", "img/3d5.jpg", "img/3d6.jpg", "img/3d7.jpg", "img/3d8.jpg"];
var imgArr2 = ["img/3d2.jpg", "img/3d3.jpg", "img/3d4.jpg", "img/3d5.jpg", "img/3d6.jpg", "img/3d7.jpg", "img/3d8.jpg", "img/3d1.jpg"];
var imgArr3 = ["img/3d3.jpg", "img/3d4.jpg", "img/3d5.jpg", "img/3d6.jpg", "img/3d7.jpg", "img/3d8.jpg", "img/3d1.jpg", "img/3d2.jpg"];
var imgArr4 = ["img/3d4.jpg", "img/3d5.jpg", "img/3d6.jpg", "img/3d7.jpg", "img/3d8.jpg", "img/3d1.jpg", "img/3d2.jpg", "img/3d3.jpg"];
var imgArr5 = ["img/3d5.jpg", "img/3d6.jpg", "img/3d7.jpg", "img/3d8.jpg", "img/3d1.jpg", "img/3d2.jpg", "img/3d3.jpg", "img/3d4.jpg"];
var imgArr6 = ["img/3d6.jpg", "img/3d7.jpg", "img/3d8.jpg", "img/3d1.jpg", "img/3d2.jpg", "img/3d3.jpg", "img/3d4.jpg", "img/3d5.jpg"];
var index = 0;
setInterval(function() {
index++;
if (index >= imgArr.length) {
index = index % imgArr.length;
index = index % imgArr2.length;
index = index % imgArr3.length;
index = index % imgArr4.length;
index = index % imgArr5.length;
index = index % imgArr6.length;
}
img.src = imgArr[index];
img2.src = imgArr2[index];
img3.src = imgArr3[index];
img4.src = imgArr4[index];
img5.src = imgArr5[index];
img6.src = imgArr6[index];
}, 2000)
以上的是js中要实现的最关键的部分，这里使用的是数组的方式去展示和修改图片的地址以表达效果。
然后以下是全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.zidongqiehuanbox {
margin: 0 0 0 100px;
}
.zidongqiehuan {
float: left;
height: 400px;
width: 200px;
/* margin: 0 0 0 50px; */
}
.zidongqiehuan:hover {
float: left;
height: 400px;
width: 320px;
transition: all 1.5s;
/* margin: 0 0 0 50px; */
}
.zidongqiehuan img {
height: 100%;
}
.zidongqiehuan img:hover {
height: 100%;
}
</style>
</head>
<body>
<div class="zidongqiehuanbox">
<div class="zidongqiehuan"><img src="img/3d1.png" alt="" id="img"></div>
<div class="zidongqiehuan"><img src="img/3d2.png" alt="" id="img2"></div>
<div class="zidongqiehuan"><img src="img/3d3.png" alt="" id="img3"></div>
<div class="zidongqiehuan"><img src="img/3d4.png" alt="" id="img4"></div>
<div class="zidongqiehuan"><img src="img/3d5.png" alt="" id="img5"></div>
<div class="zidongqiehuan"><img src="img/3d6.png" alt="" id="img6"></div>
</div>
<script>
var img = document.getElementById("img");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var img4 = document.getElementById("img4");
var img5 = document.getElementById("img5");
var img6 = document.getElementById("img6");
var imgArr = ["img/3d1.png", "img/3d2.png", "img/3d3.png", "img/3d4.png", "img/3d5.png", "img/3d6.png", "img/3d7.png", "img/3d8.png"];
var imgArr2 = ["img/3d2.png", "img/3d3.png", "img/3d4.png", "img/3d5.png", "img/3d6.png", "img/3d7.png", "img/3d8.png", "img/3d1.png"];
var imgArr3 = ["img/3d3.png", "img/3d4.png", "img/3d5.png", "img/3d6.png", "img/3d7.png", "img/3d8.png", "img/3d1.png", "img/3d2.png"];
var imgArr4 = ["img/3d4.png", "img/3d5.png", "img/3d6.png", "img/3d7.png", "img/3d8.png", "img/3d1.png", "img/3d2.png", "img/3d3.png"];
var imgArr5 = ["img/3d5.png", "img/3d6.png", "img/3d7.png", "img/3d8.png", "img/3d1.png", "img/3d2.png", "img/3d3.png", "img/3d4.png"];
var imgArr6 = ["img/3d6.png", "img/3d7.png", "img/3d8.png", "img/3d1.png", "img/3d2.png", "img/3d3.png", "img/3d4.png", "img/3d5.png"];
var index = 0;
setInterval(function() {
index++;
if (index >= imgArr.length) {
index = index % imgArr.length;
index = index % imgArr2.length;
index = index % imgArr3.length;
index = index % imgArr4.length;
index = index % imgArr5.length;
index = index % imgArr6.length;
}
img.src = imgArr[index];
img2.src = imgArr2[index];
img3.src = imgArr3[index];
img4.src = imgArr4[index];
img5.src = imgArr5[index];
img6.src = imgArr6[index];
}, 2000)
</script>
</body>
</html>
3d1.png
3d2.png
3d3.png
3d4.png
3d5.png
3d6.png
3d7.png
3d8.png
图片地址
此外可以加个：hover 改变每个盒子的宽度。这样鼠标移动上去看似就跟展开图片一样。这个思路只是一个简单的数组运用的。（‘不是轮播图哦’）
