自动切换图片（假轮播图）

使用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>