原生javascript图片轮播实现

来源：互联网发布：微信公众号矩阵案例编辑：程序博客网时间：2024/06/05 06:29

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

思路：

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

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

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

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

简单使用：

效果图

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

阅读全文

1 0