代码 – 丛雨的粉丝宝宝

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 文档基础设置 -->
    <meta charset="UTF-8">  <!-- 设置字符编码为UTF-8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- 指定IE浏览器使用最新渲染引擎 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置视口，使页面适应移动设备 -->
    <title>Document</title>  <!-- 页面标题 -->
    <link rel="stylesheet" href="./lunbotu1.css">  <!-- 引入外部CSS样式表 -->
    <style>
        /* 设置轮播图容器的样式 */
        div{
            width: 600px; height: 400px; 
            position: relative;  
        }
        /* 设置图片样式 */
        img{
            width: 100%; 
            height: 100%;  
        }
        /* 左侧按钮样式（上一张） */
        .add{
            position:absolute;  
            top:50%;  
            left:0;  
            font-size: 20px; 
            transform: translateY(-50%);  
        }
        /* 右侧按钮样式（下一张） */
        .reduce{
            position:absolute;  
            top:50%;  
            right: 0; 
            font-size: 20px;  
            transform: translateY(-50%);   
        }
    </style>
</head>
<body>
    <!-- 轮播图容器 -->
    <div>
        <img src="../img/宿舍楼.jpg" alt="">   <!-- 初始显示的图片 -->
        <span class="title">宿舍楼的文字</span>
        <button class="add">&lt;</button>  <!-- 上一张按钮，显示为左箭头 -->
        <button class="reduce">&gt;</button>  <!-- 下一张按钮，显示为右箭头 -->

    </div>
</body>
</html>

<script>
     // 这里定义了一个数组，该数组有5个对象，每个对象有两个属性，属性src和属性title
    let imgArr=[{src:'../img/宿舍楼.jpg',title:'宿舍楼的文字'},
                {src:'../img/教学楼.jpg',title:'教学楼的文字'},
                {src:'../img/护理楼.jpg',title:'护理楼的文字'},
                {src:'../img/行政楼.jpg',title:'行政楼的文字'},
                {src:'../img/药学楼.jpg',title:'药学楼的文字'}];    
    // 获取图片元素
    const imgZone=document.querySelector('img');
    // 获取文字的元素
    const titleZone=document.querySelector('.title');    
    // 全局变量，记录当前显示的图片索引
    let i=0;
     // 设置初始显示的图片[2](@ref)
    imgZone.src=imgArr[i].src;
    titleZone.innerText=imgArr[i].title; 
       // 获取上一张按钮元素
       const addButton=document.querySelector(".add")
    
    
    // 为上一张按钮注册点击事件[4](@ref)
    addButton.addEventListener("click",clickAdd);   
    // 下一张按钮的点击处理函数
    function clickAdd(){
        i++;  // 索引加1，切换到下一张图片        
        // 边界检查：如果索引超过数组长度，则跳转到第一张图片[2](@ref)
        if(i==imgArr.length){
            i=0;
        }
        // 更新图片源[1](@ref)
        // imgZone.src=imgArr[i];
        imgZone.src=imgArr[i].src;
        titleZone.innerHTML=imgArr[i].title;
        console.log("============="+imgArr[i].title)
    }

    const reduce=document.querySelector('.reduce');
    reduce.addEventListener('click',clickReduce);
    function clickReduce(){
        i--;
        if(i==-1){
            i=imgArr.length-1;
        }
        imgZone.src=imgArr[i];
        titleZone.innerHTML=imgArr[i].title;
    }
    let dingshiqiID=setInterval(clickAdd,1000);
    const div=document.querySelector('div');

    div.addEventListener('mouseenter',stop);
    function stop(){
        clearInterval(dingshiqiID);
    }

    div.addEventListener('mouseleave',goon);
    function goon(){
        dingshiqiID=setInterval(clickAdd,1000);
    }
</script>
发送评论 编辑评论

发送评论编辑评论
