第3章 javaScript操作 Dom对象课后作业：

最新推荐文章于 2023-03-30 09:46:11 发布

原创

最新推荐文章于 2023-03-30 09:46:11 发布 · 4.8k 阅读

16 ·

CC 4.0 BY-SA版权

本文介绍了如何使用JavaScript进行DOM操作，包括实现图片轮播效果，点击按钮动态添加上传文件行，以及鼠标悬停改变标题背景与显示对应内容的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        .scroll{width: 360px; height: 190px; overflow: hidden; margin: 0 auto; position: relative;}
        a{
            font-size: 14px;
            color: #39F;
            height: 18px;
            width: 20px;
            border: 1px solid #39F;
            text-decoration: none;
            display: block;
            float: left;
            margin-right:5px;
            text-align: center;
            background-color: #FFF;
            line-height: 20px;
        }
        a:hover {
             font-size: 14px;
             font-weight: bold;
             color: #FFF;
             background-color: #39F;
             border: 1px solid #39F;
             text-decoration: none;
             display: block;
         }
        #num {
            position:absolute;
            width:180px;
            height:25px;
            z-index:2;
            left:100px;
            top: 13px;
        }
    </style>
</head>
<body>
<div class="scroll">
    <img src="images/1.gif" id="photo"/>
    <div id="num">
        <a onmouseover="f(1)" href="">1</a>
        <a onmouseover="f(2)" href="">2</a>
        <a onmouseover="f(3)" href="">3</a>
        <a onmouseover="f(4)" href="">4</a&g