鼠标轮播图（HTML+CSS+JS）DOM

最新推荐文章于 2022-09-21 16:47:47 发布

小李不吃绿皮青椒

最新推荐文章于 2022-09-21 16:47:47 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏：网页设计加实操文章标签： javascript html5 css

本文链接：https://blog.youkuaiyun.com/qq_45841233/article/details/123922564

网页设计加实操专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何使用HTML、CSS和JavaScript（DOM操作）创建一个简单的鼠标悬停轮播图。通过设置样式和监听鼠标事件，实现了在列表项上悬停时切换显示相应内容的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标轮播图（HTML+CSS+JS）DOM

在这里插入图片描述

<!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">
    <link rel="stylesheet" href="../DOM轮播图/tab.css">
    <title>轮播图-小荣同学</title>
</head>
<body>
    
    <div class="box">
        <div class="up">
            <ul>
                <li class="select"><a href="#">百度</a></li>
                <li><a href="#">新浪</a></li>
                <li><a href="#">淘宝</a></li>
                <li><a href="#">京东</a></li>
                <li><a href="#">网易</a></li>
            </ul>
        </div>
        <div class="down">
            <div class="div-select">百度内容</div>
            <div>新浪内容</div>
            <div>淘宝内容</div>
            <div>京东内容</div>
            <div>网易内容</div>
        </div>
    </div>

    <script src="../DOM轮播图/tab.js"></script>

</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: bisque;
}

.box{
    width: 300px;
    height: 200px;
    background: aliceblue;
    margin: 100px auto;
}

.box .up{
    height: 50px;
    width: 100%;
}

.box .up ul{
    list-style-type: none;
    text-align: center;
}

.box .up ul li{
    float: left;
    width: 60px;
    height: 50px;
    line-height: 50px;
}

.box .up ul li a{
    text-decoration: none;
    font-size: 20px;
}

.select{
    border-bottom: 2px solid orange;
}

.down{
    height: 100px;
    width: 100%;
    position: relative;
    text-align: center;
}

.box .down div{
    position: absolute;
    line-height: 50px;
    height: 100%;
    width: 100%;
    display: none;
}

.box .down div.div-select{
    display: block;
}

JS:

// 1.获取页面所有的元素
var lis = document.querySelector(".up").querySelectorAll("li");
var divs = document.querySelector(".down").querySelectorAll("div");

console.log(lis);
console.log(divs);
//2.闭包帮我们保存变量到内存中
for(var i = 0;i<lis.length;i++){
    (function(i){
        lis[i].onmouseenter = function(){
            for(var j = 0;j<lis.length;j++){
                lis[j].removeAttribute("class");
                divs[j].removeAttribute("class");
            }
            lis[i].setAttribute("class","select");
            divs[i].setAttribute("class","div-select");
        }
    }(i))
}


/**
 * 1.获取元素
 * 2.闭包
 * 3.事件：鼠标滑动
 * 4.属性的操作：添加、删除
 */