焦点图案例（事件监听和排他思想）-CSDN博客

本文链接：https://blog.csdn.net/weixin_52119040/article/details/119243720

<!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">
    <title>Document</title>
</head>
<body>
   <div class="box">
    <div class="focus">
           <div class="pic">
                <img src="./images/b_01.jpg" alt="" style="display: block;">
                <img src="./images/b_02.jpg" alt="">
                <img src="./images/b_03.jpg" alt="">
                <img src="./images/b_04.jpg" alt="">
                <img src="./images/b_05.jpg" alt="">
                <img src="./images/b_06.jpg" alt="">
                <img src="./images/b_07.jpg" alt="">
                <img src="./images/b_08.jpg" alt="">
                <img src="./images/b_09.jpg" alt="">
                <img src="./images/b_10.jpg" alt="">
           </div>
           <div class="text">
               <h3>第1张图片描述信息</h3>
               <a href="javascript:;" class="prev"></a>
               <a href="javascript:;" class="next"></a>
           </div>
    </div>
    <div class="focus_list">
        <ul>
            <li class="active">
                <img src="./images/s_01.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_02.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_03.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_04.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_05.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_06.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_07.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_08.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_09.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
            <li>
                <img src="./images/s_01.jpg" alt="">
                <span class="mask"></span>
                <span class="border"></span>
            </li>
        </ul>
    </div>
   </div>
</body>
</html>

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 700px;
            margin: 100px auto;
        }
       .pic {
           width: 700px;
       }
       .pic img {
           display: none;
       }
       .text {
           position: relative;
            height: 50px;
            line-height: 50px;
            background: rgba(0,0,0,.8);
            color: greenyellow;
            padding-left: 20px;
       }
       .prev,
       .next {
           position: absolute;
           right: 50px;
           top: 10px;
           display: block;
           width: 30px;
           height: 30px;
           background: url(./images/icon_focus_switch.png);
       }
       .prev:hover {
           background-position: -30px 0;
       }
       .next {
        right: 20px;
        background-position: -60px 0;
       }
       .next:hover {
           background-position: -90px 0;
       }
       .focus_list {
           width: 700px;
           height: 80px;
           background-color: rgba(0,0,0,.9);
       }
       .focus_list ul {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 700px;
        height: 80px;
       }
       .focus_list li {
           position: relative;
           width: 60px;
           height: 60px;
           list-style: none;
       }
       .focus_list li img {
           width: 100%;
       }
       .focus_list .mask {
           position: absolute;
           left: 0;
           top: 0;
           width: 60px;
           height: 60px;
           background-color: rgba(0, 0, 0, 0.4);
       }
       .focus_list .border {
           display: none;
           position: absolute;
           left: 0;
           bottom: 0;
           width: 60px;
           height: 5px;
           background-color: greenyellow;
       }
       .focus_list .active .mask {
           display: none;
       }
       .focus_list .active .border {
           display: block;
       }
    </style>

 <script>
       // 鼠标移入li,li添加类名,显示相应图片,修改h3的文字,上面显示相应大图
       // 获取元素
       let imgs= document.querySelectorAll('.pic img')
       let h3 = document.querySelector('.text h3')
       let lis = document.querySelectorAll('.focus_list li')
       let prev = document.querySelector('.text .prev')
       let next = document.querySelector('.text .next')
       // 给li添加监听事件
       for(let i = 0;i < lis.length; i++) {
           lis[i].addEventListener('click',function () {
               // 排他
               for(let i = 0; i < lis.length; i++) {
                   // 清除所有类名
                   lis[i].className = ''
                   // 隐藏所有大图
                   imgs[i].style.display = 'none'
               }
               // 当前li添加类名
               this.className = 'active'
               // 相应的大图显示
               imgs[i].style.display = 'block'
               // 修改h3的内容
               h3.innerHTML = `第${i + 1}张图片描述信息`
               //点击li时i控制显示图片的索引号,点击按钮时index控制显示图片的索引号,为了保证二者一致,将i赋值给index
               index = i
             })
       }
       // 点击左右切换按钮,li和大图的图片可以切换,h3的信息修改
       // 左按钮添加监听事件
       // 定义一个表示索引号的变量
       let index = 0
       prev.addEventListener('click',function () {
            index--
            if(index < 0) {
                index = 9
            }
            // 排他
            for(let i = 0; i < lis.length; i++) {
                // 清除所有类名
                lis[i].className = ''
                imgs[i].style.display = 'none'
            }
            // 显示相应索引号的大图,相应索引号的li添加类名
            lis[index].className = 'active'
            imgs[index].style.display = 'block'
            // 修改h3的内容
            h3.innerHTML = `第${index + 1}张图片描述信息`
         })
         // 右侧按钮
        next.addEventListener('click',function () {
            index++
            if(index > 9) {
                index = 0
            }
            // 排他
            for(let i = 0; i < lis.length; i++) {
                // 清除所有类名
                lis[i].className = ''
                imgs[i].style.display = 'none'
            }
            // 显示相应索引号的大图,相应索引号的li添加类名
            lis[index].className = 'active'
            imgs[index].style.display = 'block'
            // 修改h3的内容
            h3.innerHTML = `第${index + 1}张图片描述信息`
         })
   </script>