JS实现简单的轮播图（非常简单，一看就懂）

拼搏现实的明天。 2022-05-28 21:28 61阅读 0赞

主要思路：先将需要轮播的4张图使用绝对定位让其重叠在banner这个盒子中，然后遍历所有的图片将其隐藏，再获取当前图片的index值，根据当前的index值设置当前的图片显示出来。设置间歇定时器setInterval每隔1秒使得index的值加1，如果大于图片个数则index=0，每隔1秒调用changeImg()函数，改变图片的显示。

li项的实现原理一样，总的来说就是围绕index的值来进行设置图片的显示与隐藏，或是Li项的样式，从而达到轮播图的效果。

以下为代码部分：

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS实现轮播图</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="main" id="main">
            <div class="nav" id="nav">
                <ul>
                    <li class="changeColor">首页</li>
                    <li>点击看看</li>
                    <li>会自动的</li>
                    <li>我的网站</li>
                </ul>
            </div>
            <div class="banner" id="banner">
                <a href="#">
                    <div class="banner-slide slide1"></div>
                </a>
                <a href="#">
                    <div class="banner-slide slide2"></div>
                </a>
                <a href="#">
                    <div class="banner-slide slide3"></div>
                </a>
                <a href="#">
                    <div class="banner-slide slide4"></div>
                </a>
            </div>
        </div>
        <script type="text/javascript" src="js/script.js"></script>
    </body>
    </html>

CSS代码：

* {
        padding: 0;
        margin: 0;
    }
    
    .main {
        width: 1200px;
        height: auto;
        margin: 50px auto;
        overflow: hidden;
    }
    
    .nav {
        width: 1200px;
        height: 80px;
    }
    
    ul {list-style-type: none;}
    
    li {
        float: left;
        width: 25%;
        height: 80px;
        text-align: center;
        line-height: 80px;
        cursor: pointer;
    }
    
    .changeColor {
        background: #ffcc00;
        border-radius: 5px;
    }
    
    .banner {
        width: 1200px;
        height: 460px;
        overflow: hidden;
    }
    
    .banner-slide {
        width: 1200px;
        height: 460px;
        background-repeat: no-repeat;
        position: absolute;
    }
    
    .slide1 {
        background-image: url("../img/1.jpg");
    }
    .slide2 {
        background-image: url("../img/2.jpg");
    }
    .slide3 {
        background-image: url("../img/3.jpg");
    }
    .slide4 {
        background-image: url("../img/4.jpg");
    }

JS代码：

效果如下：

![Image 1][]

[Image 1]: