JavaScript练手小技巧：利用鼠标滚轮控制图片轮播

最新推荐文章于 2025-03-20 06:33:51 发布

stones4zd

最新推荐文章于 2025-03-20 06:33:51 发布

阅读量1.4k

点赞数 6

分类专栏： javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_42703239/article/details/141991372

版权

近日，在浏览网站的时候，发现了一个有意思的效果：一个图片轮播，通过上下滚动鼠标滚轮控制图片的上下切换。

于是就有了自己做一个的想法，顺带复习下鼠标滚轮事件。

鼠标滚轮事件，参考这篇文章：鼠标滚轮事件-CSDN博客

一、HTML和CSS

无论怎么样的滚动，首先要制作图片轮播的结构和样式。

HTML：

<div class="box" id="box">
    <ul class="list" id="list">
        <li><img src="../images/pic1.jpg" alt=""></li>
        <li><img src="../images/pic2.jpg" alt=""></li>
        <li><img src="../images/pic3.jpg" alt=""></li>
        <li><img src="../images/pic4.jpg" alt=""></li>
        <li><img src="../images/pic5.jpg" alt=""></li>
    </ul>   
    <div class="dots" id="dots"></div>
</div>

HTML结构很简单，就是一个 div 里面套了两个结构：图片区和控制点区。

图片区 ul#list，就是一个 ul，里面有多个 li 嵌套了图片。
控制点区 div#dots 没有内容，这是因为控制点要根据图片的数量（ul 的 li 个数）动态生成。

CSS：

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
.box{
    width: 600px;
    height: 399px;
    border:20px #000 solid;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    margin-top: 100px;
}
.list{
    position: relative;
}
.list img{
    display: block;
}
.list li{
    width: 600px;
    height: 399px;
    overflow: hidden;
}
.box .dots{
    p

最低0.47元/天解锁文章