3.13 day24 web api 第一天

我在某马学前端

已于 2023-03-13 15:58:40 修改

阅读量194

点赞数

分类专栏： web api 文章标签：前端 css html Powered by 金山文档

于 2023-03-13 15:55:25 首次发布

本文链接：https://blog.csdn.net/weixin_45190461/article/details/129476411

版权

web api 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章详细介绍了如何利用WebAPI中的DOM操作来创建轮播图效果，包括通过CSS选择器获取元素，操作元素内容和属性，以及使用JavaScript的定时器函数实现自动切换。文中还给出了QQ音乐轮播图的示例代码，展示了具体应用。

摘要由CSDN通过智能技术生成

1.目标:轮播图

2.变量声明

3.web api基本认知

1.作用和分类

2.什么是DOM

3.DOM树

4.DOM对象

4.获取DOM对象

1.css选择器

2.All

3.其他方法

5.操作元素内容

1.案例

6.操作元素属性

1.操作元素常用属性

2.练习

3.操作元素样式属性

4.练习

5.操作类名属性

6.操作class list修改样式

7.轮播图

8.操作表单元素的属性

9.自定义属性

10.间歇函数定时器

1.函数介绍

2.案例

11.综合案例

12.简答题

1.时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bgc {
            position: relative;
            width: 600px;
            height: 600px;
            background-image: url(./images/clock.jpg);
            border:1px solid black;
        }
        /* 定位 */
        img {
            position: absolute;
            left:50%;
            top: 0;
            margin-left: -15px;
            rotate: 0deg;
            /* transform: rotate(270deg); */
        }
    </style>
</head>
<body>
    <div class="bgc">
        <img src="./images/second.png" alt="">
    </div>
    <script>
        let i = 0
        const img = document.querySelector('.bgc img')
        setInterval(function(){
            i += 6
            if(i === 360){
                i = 0
            }
            img.style.rotate = i + "deg"
        }, 1000)
    </script>
</body>
</html>

2.qq音乐轮播图

最好使用div套img做
我这里使用的是背景图做的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qq音乐轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .f {
            position: relative;
            width: 700px;
            height: 320px;
            background-image: url("./images/b01.jpg");
        }
        .son {
            width: 100%;
            height: 100%;
        }
        p {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 35px;
            padding-left: 20px;
            line-height: 35px;
            background-color: rgba(0,0,0,.1);
        }
    </style>
</head>
<body>
    <div class="f">
        <div class="son"></div>
        <p>挑战云歌单，欢迎你来</p>
    </div>
    <script>
        // 数据
        const data = [
            {
                imgSrc: 'images/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: 'images/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: 'images/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: 'images/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: 'images/b05.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: 'images/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
                imgSrc: 'images/b07.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: 'images/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: 'images/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]
        //9个图片
        let i = 0
        setInterval(function(){
            i++
            if(i >= data.length){
                i = 0
            }
            //换图片
            const son = document.querySelector('.f .son')
            // url("./images/b01.jpg");
            str = 'url(' + data[i].imgSrc + ')'
            console.log(str);
            son.style.backgroundImage =  str 

            //换文字
            const p = document.querySelector('.f p')
            p.innerHTML = data[i].title
        },1000)
        
    </script>
</body>
</html>