第十次前端作业

这波博客确实鸽了好久,一直在忙别的事。享受、珍惜这总结、写文案的时刻。

第十次前端作业,这里要求做一个图片轮播和鼠标悬浮切换图片的效果。

html部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>   
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }     
        .change{
            margin-top: 30px;
        }
        
        button{
            width: 70px;
            padding: 5px;
            color: grey;
        }
        .cycle{
            margin-top: 30px;
            
            margin-bottom: 20px;
        }
        /* .bo{
            position: absolute;
            top: 430px;
        } */
    </style>
    <script type="text/javascript" src="aaa.js"></script>
</head>
<body>
    <div class="cycle" align="center">
        <img src="images1/love1.jpg" id="img1">
    </div>
        
    <div align="center" >
        <span><button id="b1">start</button></span>
        <span><button id="b2">pause</button></span>
        <!-- <img src="images1/love1.jpg" id="img1"> -->
    </div>
    <div align="center">
        <div class="change">
            <img src="images2/dl1.jpg"
            onmouseover="this.src='images2/dl1d.jpg'"
            onmouseout="this.src='images2/dl1.jpg'">
        </div>
    </div>
    
</body>
</html>

JavaScript部分代码

window.onload = function () {
    var img1 = document.getElementById("img1");
    var imgArr = ["images1/love1.jpg", "images1/love2.jpg", "images1/love3.jpg", "images1/love4.jpg", "images1/love5.jpg"];
    // 定义一个图片列表
    var index = 0;
    // 创建一个图片索引变量
    var timer;
    // 创建一个变量来保存定时器标识
    var b1 = document.getElementById("b1");
    // 为b1绑定一个单击相应函数
    b1.onclick = function () {
        clearInterval(timer)
        // clear的意思是清除之前已有的计时器,重新设置一个
        // 开启一个计时器,来回切换图片
        timer = setInterval(() => {
            // 如上一行,set的意思是定义一个新计时器
            index++;
            // 判断索引是否超过最大值,这里的方法很巧妙
            index = index % imgArr.length
            img1.src = imgArr[index]
        }, 1000);
        // 1000指的是1000毫秒,即每秒切换一次
    }
    var b2 = document.getElementById("b2")
    // 为b2绑定一个单击响应函数
    b2.onclick = function () {
        clearInterval(timer)
    }
}

效果图如下