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

最新推荐文章于 2022-02-09 17:48:49 发布

产品迪

最新推荐文章于 2022-02-09 17:48:49 发布

阅读量290

点赞数

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

本文链接：https://blog.csdn.net/weixin_46054543/article/details/109537790

版权

本文介绍了一个简单的轮播图案例，通过HTML结构布局，CSS进行样式设计，并利用JavaScript实现轮播点的鼠标事件，动态更换背景图片。核心思路包括设置一个包含背景图片的div盒子和用于切换的轮播点，通过定位和索引号实现图片切换功能。

摘要由CSDN通过智能技术生成

简单轮播图案例：

先看效果图：

在这里插入图片描述

核心思路如下：

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

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

scirpt核心代码如下：

<script>
       //获取元素
       var myLis = document.querySelector('.nav').querySelectorAll('li');
       //循环注册点击事件
       for (var i = 0; i < myLis.length; i++) {
   
           //设置索引号
           myLis[i].index = i;
           myLis