原生javascript图片轮播实现

柔情只为你懂 2022-06-09 22:59 313阅读 0赞

初学javascript，尝试着制作动画-图片轮播。（实现方法挺多）

思路：

添加多张图片，依次让图片显示。

依次显示需要每隔一段时间去更新，因此选择了setInterval()来定时更新。

更新时需要将当前的图片隐藏，添加变量进行记录即可。

这里隐藏图片选择了display，便于做成插件。

简单使用：

![Center][]

效果图

html代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #imgbox{
            position: absolute;
            overflow: hidden;
            z-index: -10;
        }
        #imgbox ul{
            display: table-cell;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 10px;
            list-style-type: none;
        }
        #imgbox ul li{
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 10px;
            background-color: #ffffff;
            border-radius: 6px;
        }
        #imgbox ul li:hover{
            border: 1px solid #595959;
        }
        #imgbox img{
            display: none;
            width: 100%;
        }
        #imgbox #prev,#imgbox #next{
            position: absolute;
            top: 0;;bottom: 0;
            width: 50px;
            height: 50px;
            margin: auto;
            background-color: rgba(233, 233, 233, 0.7);
            border-radius: 51px;
            z-index: 20;
        }
        #imgbox:hover #prev,#imgbox:hover #next{
            background-color: rgba(233, 233, 233, 0.85);
        }
        #imgbox #prev{
            left: 0
        }
        #imgbox #next{
            right: 0;
        }
        #imgbox #prev:before,#imgbox #next:before{
            position: absolute;
            top:-9px;
            font-size: 60px;
            color: rgba(0, 0, 0, 0.16);
            line-height: 60px;
        }
        #imgbox:hover #prev:before,#imgbox:hover #next:before{
            color: rgba(0, 0, 0, 0.5);
        }
        #imgbox #prev:before{
            content: "<";
            left: -1px;
        }
        #imgbox #next:before{
            content: ">";
            right: -1px;
        }
    
    
    </style>
    <script src="轮播图.js"></script>
    <body>
    <div id="imgbox">
        <div id="prev"></div>
        <img src="img/01.jpg" alt=""/>
        <img src="img/02.jpg" alt=""/>
        <img src="img/03.jpg" alt=""/>
        <img src="img/04.jpg" alt=""/>
        <img src="img/05.jpg" alt=""/>
        <img src="img/06.jpg" alt=""/>
        <img src="img/07.jpg" alt=""/>
        <img src="img/08.jpg" alt=""/>
        <div id="next"></div>
    </div>
    <script >init("imgbox","prev","next",1500);</script>
    </body>
    </html>

javascript代码：[git@code.csdn.net:snippets/2518355.git][git_code.csdn.net_snippets_2518355.git]

[Center]: /images/20220610/4f1457c592694a46b389ee185fdc8c0f.png
[git_code.csdn.net_snippets_2518355.git]: https://code.csdn.net/snippets/2518355