写一个简陋版的js轮播图

首先第一步应该是把思路捋一捋：

1.先想象一下轮播图长什么样，然后轮播图由什么组成。

2.自己想象的轮播图就是中间一张图片然后一直自动切换图片。

3.最主体就是中间一张大图片。

4.图片可以使用img直接挂上去，但是还要考虑之后的自动轮播，所以图片的主体可以使用div包起来，之后依靠display方便效果的实现

5.使用div的background-image实现图片的显示，但是这样子图片会一直按顺序排列下去

6.所以可以使用position里的绝对定位实现图片全部都放在一个区域

7.好图片放好之后，就可以考虑轮播效果的实现了

-----------------------------------------------------------------------

8.之前说了使用div显示图片是因为可以使用display属性使得图片隐藏于显示，从而实现轮播效果

-----------------------------------------------------------------------

思路想好了，接下来就是实现思路了

下面的代码是先实现图片的基本骨架：

<body>
<!--首先写一个简单的轮播图，既只有图片在动，没有其它的操作-->
<!--这个div放图片，负责整个框架-->
<div class="mainBox">
    <div class="pic picBox1"></div>
    <div class="pic picBox2"></div>
    <div class="pic picBox3"></div>
    <div class="pic picBox4"></div>
    <div class="pic picBox5"></div>
</div>

class='mainBox'是一个主题骨架，其主要作用是在定位position的时候作为下面图片div的参考

注意：position里的absolute参考的是不为static属性的第一次父标签，所以mainbox的position应该手动设置为relative

html里的骨架实现了，接下来就是css代码的实现了

<style>
        .mainBox {
            width: 1250px;
            height: 500px;
            margin: 30px auto;
            border: 3px solid pink;
            overflow: hidden;
            border-radius: 50px 50px;
            position: relative;
        }
        .pic {
            width: 1200px;
            height: 460px;
            border: 5px solid lightskyblue;
            margin: 30px 20px;
            background-repeat: no-repeat;
            position: absolute;
        }
        .picBox1 {
            background-image:url("Hua_1.jpg");
        }
        .picBox2 {
            background-image:url("Hua_2.jpg");
        }
        .picBox3 {
            background-image:url("Hua_3.jpg");
        }
        .picBox4 {
            background-image:url("Hua_4.jpg");
        }
        .picBox5 {
            background-image:url("Hua_5.jpg");
        }
    </style>

再接下来就是js的代码实现了

<script>
    var pics = document.getElementsByClassName('pic');
    var index = 0;
    setInterval(function() {
        index += 1;
        if(index >= pics.length) {
            index = 0;
        }
        changeImage();
    },3000);
    var changeImage = function() {
        for(var i = 0;i < pics.length;i += 1)
            pics[i].style.display = 'none';
        pics[index].style.display = 'block';
    };
    //setInterval(function() { console.log(1)},1000);
</script>

index是作为图片显示的索引数字。

其中最主要是应用display这个属性来实现图片的轮播效果

最简陋版的轮播图就是这样了，接下来就是写可以有按钮的轮播图了

写一个简陋版的js轮播图

猜你喜欢