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

简单轮播图案例:

先看效果图:

在这里插入图片描述

核心思路如下:

一、(结构)一个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[i].onmouseover = function () {
               //更改盒子背景图片
               document.querySelector('div').style.backgroundImage = 'url("images03/b' + (this.index+1) + '.jpg")';
           }

       }
   </script>

HTML结构代码如下:

<div class="box">
        <!--圆点选项-->
        <ul class="nav">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

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;
        }

版权声明:本文为weixin_46054543原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>