web day5 作业

最新推荐文章于 2024-07-20 18:16:53 发布

fascinating14

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量28

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/fascinating14/article/details/130231583

版权

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>焦点图</title>
    <link rel="stylesheet" href="./作业1.css">
</head>
<body>
    <div class="box">
        <img src="./images/1.png" alt="" class="img">
        <div class="title">
            我的青春，我来定义
        </div>
    </div>
    <script src="./作业1.js"></script>
</body>
</html>

.box {
    position: relative;
    margin: auto;
    text-align: center;
    background-color: blue;
}

.box>img {
    width: 500px;
    height: 350px;
}

.title {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-250px);
    z-index: 2;
    width: 500px;
    height: 40px;
    background-color: rgba(53, 51, 51, .5);
    text-align: center;
    line-height: 40px;
    color: blue;
    font-size: 20px;
}

let data = [
    {
        imageSrc: './images/1.png',
        title: '我的青春，我来定义'
    },
    {
        imageSrc: './images/2.png',
        title: '我可太美丽'
    },
    {
        imageSrc: './images/3.png',
        title: '大聪明门'
    },
    {
        imageSrc: './images/4.png',
        title: '安妮'
    },
    {
        imageSrc: './images/5.png',
        title: '安妮Annie'
    },
]
let num = 0
let road = document.querySelector('.img')
let txt = document.querySelector('.title')
setInterval(function(){
    num++
    if (num == data.length){
        num = 0
    }
    road.src = data[num].imageSrc
    txt.innerHTML = data[num].title
},1000)

2.封装函数

<!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>
</head>
<body>
    <script>
        function getNum() {
            let sum = 0
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i] 
            }
            console.log(sum)
            console.log(sum / arguments.length)
        }
        let a = getNum(231,23,34,545,12,54)
    </script>
</body>
</html>