封装函数、聚焦图片

最新推荐文章于 2024-10-01 20:12:28 发布

h20230209

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量36

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/h20230209/article/details/130253734

版权

文章展示了如何使用JavaScript创建求和与求平均值的函数，以及利用HTML和CSS实现一个简单的图片轮播效果，图片标题随图片更换。

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

1. 封装函数

<body>
    <script>
        // 求和
        function count(){
            let sum = 0
            for (let i = 0; i < arguments.length; i ++){
                sum += arguments[i]  
    
            }
            return sum 
        }
        console.log(count(2,45,1,5,4))

            // 求平均值
        function aver(){
            let sum = 0
            for (let i = 0; i < arguments.length; i ++){
                sum += arguments[i]  
            }
            let eve = sum / arguments.length
            return eve
        }
        console.log(aver(2,45,1,5,4))

    </script>
</body>

运行结果：

2. 聚焦图

<style>
        .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;
        }
    </style>

<body>
    <div class="box">
        <img src="./images/1.png" alt="" class="img">
        <div class="title">我的青春，我来定义</div>
    </div>    
       
       <script>
        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 img = document.querySelector('.img')
        let div = document.querySelector('.title')
        let num = 0
        setInterval(function(){
            num ++
            if (num == data.length){
                
            }
            img.src = data[num].imageSrc
            div.innerHTML = data[num].title
        },1000)
        
       </script>
        
</body>

运行结果：