超详细解释:使用定时器实现轮播图效果(HTML、CSS、JavaScript)

最新推荐文章于 2024-05-01 02:45:35 发布

浅默淡殇450

最新推荐文章于 2024-05-01 02:45:35 发布

阅读量1.8k

点赞数 2

分类专栏：网页设计 Javascript 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_56296642/article/details/127144635

版权

用定时器实现轮播图效果（HTML、CSS、JS）

效果如下：
在这里插入图片描述

在这里插入图片描述

下面展示具体代码。

// function 函数
//动态的绑定事件：DOM元素对象.事件(on+事件名称组成)=事件处理程序(响应用户行为所执行的程序代码）
//setInterval会在指定的时间后，自动重复执行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
   margin: 0;padding: 0;}
        ul{
   
            list-style: none;
        }
        #main{
   
            width: 478px;
            height: 286px;
            border: 1px solid #ccc;
            overflow: hidden;
            /* overflow: hidden; 超出隐藏*/
            position: relative;/* 形成定位模型 */
             margin: 20px auto; 
        }
        #one{
   
            width: 150px;
            height: 30px;
            position: absolute;
            z-index: 100;
            right:5px;
            bottom: 5px;
        }
        #one li{
   
            width: 15px;
            height: 15px;
            float