css+javascript轮播图案例

铃儿响叮当不响

已于 2022-07-20 22:12:36 修改

阅读量181

点赞数

分类专栏：前端js笔记文章标签： css javascript 前端

于 2022-07-20 22:10:20 首次发布

本文链接：https://blog.csdn.net/qq_36507046/article/details/125889669

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的轮播图效果，包括小图标鼠标经过事件、图片切换、左右按钮播放以及自动播放和暂停功能。通过监听事件和动态修改样式，实现了大图和小图的同步变化，同时提供了详细的代码示例。

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

效果图：

代码：

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .content {
            margin:0px auto;
            width: 800px;
            height: 500px;
            margin-top: 50px;
            position: relative;
        }
        .imgBox li{
        position: absolute;
        left: 120px;
        list-style: none;
        opacity: 0;
        }
        .imgBox .info {
          height: 500px;
          width: 800px;
        }
        .pre {
         position: absolute;
         left: 110px;
         top: 30%;
         width:30px;
         height: 15px;
         font-size: 12px;
         line-height: 15px;
         opacity: 0.8;
        }
        .next {
         position: absolute;
         right: 120px;
         top: 30%;
         width:30px;
         height: 15px;
         font-size: 12px;
         line-height: 15px;
         opacity: 0.8;
        }
        .tip ul {
        display: flex; 
        justify-content: center;
        width: 550px;
        position: absolute;
        bottom: 100px;
        left: 120px;
        }
        .tip li {
        list-style: none;
        display: inline;
        opacity: 0.3;
        }
        .imgBox .active {
            opacity: 1;
        }
        .tip .active {
            opacity: 1; 
        }
    </style>
</head>
<body>
<div class="content">
      <div class="imgBox">
         <ul clas>
            <li class="active">
                <img src="./imgs/001.jpg" width="80%">
                <span class="mask"></span>
            </li>
            <li>
                <img src="./imgs/002.jpg" width="80%">
            </li>
            <li>
                <img src="./imgs/003.jpg" width="80%">
            </li>
            <li>
                <img src="./imgs/004.jpg" width="80%">
            </li>
            <li>
                <img src="./imgs/005.jpg" width="80%">
            </li>
            <li>
                <img src="./imgs/006.jpg" width="80%">
            </li>
         </ul>
        <div class="info">
            <input type="button" value="<" class="pre">
            <input type="button" value=">" class="next">
        </div>
      </div>

     <div class="tip">
            <ul>
                <li class="active">
                    <img src="./imgs/one.png" width="60%">
                </li>
                <li>
                    <img src="./imgs/two.png" width="60%">
                </li>
                <li>
                    <img src="./imgs/three.png" width="60%">
                </li>
                <li>
                    <img src="./imgs/four.png" width="60%">
                </li>
                <li>
                    <img src="./imgs/five.png" width="60%">
                </li>
                <li>
                    <img src="./imgs/six.png" width="60%">
                </li>
            </ul>
     </div>
</div>  


     <script>
        // 需求1：小图标鼠标经过事件
        // 鼠标经过小图片，当前高亮，其余兄弟变淡
        let lis = document.querySelectorAll('.tip li')
        let pics = document.querySelectorAll('.imgBox li')
        let text = document.querySelector('h3')
        let next = document.querySelector('.next')
        let pre = document.querySelector('.pre')
        let lunbo = document.querySelector('.imgBox')
        // 给多个小li绑定事件
        for(let i = 0; i < lis.length; i++){
          lis[i].addEventListener('click',function(){
            // 选出唯一的那个active，删除类
            document.querySelector('.tip li.active').classList.remove('active')
            // 鼠标经过谁，谁加上active 这个类
            this.classList.add('active')
             // 需求2 大图片跟随变化 一定要放到鼠标经过事件里边
            document.querySelector('.imgBox li.active').classList.remove('active')
            pics[i].classList.add('active')
            // 需求4 解决一个问题 如果鼠标再经过前面的小图标，右侧播放按钮会乱序
            // 将鼠标经过的索引号重新赋值给index 全局变量
            index = i
          })
        }

        // 需求3: 右侧按钮播放效果 点击右侧按钮 ，可以自动播放下一张图片
        // 需要一个变化量 index 不断自增 然后播放下一张图片
        // 如果到了最后 一张，必须还原为第一张图片 
        // 索引号 = 索引号%数组长度（放到播放前面）
        let index = 0
        next.addEventListener('click',function(){
          index++
          index = index % lis.length
          common()
        })


        // 需求5左侧按钮
        pre.addEventListener('click',function(){
          index--
        //   if ( index < 0 ) {
        //      index = lis.length - 1
        //   }
          index = (lis.length + index) % lis.length
          common()
        
        })
        
        // 需求6 因为左侧按钮与右侧按钮代码部分有很多重复代码，因此可以封装一个函数，降低代码复杂度
        function common(){
             // 选出 index 小图片 做操作
          document.querySelector('.tip li.active').classList.remove('active')
          lis[index].classList.add('active')
          // 选出 index 大图片 做操作
          document.querySelector('.imgBox li.active').classList.remove('active')
          pics[index].classList.add('active')
        }


        // 需求7 轮播图自动播放
        let timer = setInterval(function(){
            next.click()
        },2000)
       // 需求8 鼠标经过大图片小图片停止播放
        lunbo.addEventListener('mouseenter',function(){
        clearInterval(timer)
        })
        // 鼠标离开轮播图停止播放
        lunbo.addEventListener('mouseleave',function(){
            // 注意这里不能写let
            timer = setInterval(function(){
            next.click()
        },1000)
        })
     </script>
</body>
</html>