鼠标事件之简单轮播更换背景图实

缺乏、安全感 2022-12-19 09:29 128阅读 0赞

## 简单轮播图案例： ##

先看效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]

*核心思路如下：*

> 一、（结构）一个div盒子放置背景图片、五个轮播点用 ul 包涵五个 Li 来实现  
> ps：用了定位position，父相子绝：父亲盒子要相对定位，子盒子要绝对定位。

> 二、（js实现）获取五个轮播点Li 用for循环遍历注册点鼠标事件、并给五个 Li 依次设置索引号、用this关键字更换div盒子的背景图片。

`scirpt核心代码如下：`

`HTML结构代码如下：`

`CSS样式代码如下：`

* { 
                margin: 0;
                padding: 0;
            }
            li { 
                list-style: none;
            }
            .box { 
                position: relative;
                width: 520px;
                height: 280px;
                margin: 100px auto;
                padding: 5px;
                background-size: contain;
                background-image: url("images03/b5.jpg");
            }
            .nav { 
                position: absolute;
                left: 40%;
                bottom: 10px;
                width: 70px;
                height: 14px;
                background-color: rgba(255,255,255,.2);
                border-radius: 10px;
            }
            .nav li { 
                float: left;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin: 3px;
                background-color: white;
                cursor: pointer;
            }
            .nav li:hover { 
                background-color: #ff6600;
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c76c6135d6714cc5895cdd66ddfc4296.png