• js写轮播图，逐步完善

    目录

    1、自动轮播

    2、点击更换

     3、自动播放加左右箭头点击切换

    4、完整版轮播图

    1、自动轮播

    用定时器setInterval()来写，可以实现自动播放

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8" />
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.     <title>轮播图点击切换title>
    9.     <style>
    10.         * {
    11.             box-sizing: border-box;
    12.         }
    13.  
    14.         .slider {
    15.             width: 560px;
    16.             height: 400px;
    17.             overflow: hidden;
    18.         }
    19.  
    20.         .slider-wrapper {
    21.             width: 100%;
    22.             height: 320px;
    23.         }
    24.  
    25.         .slider-wrapper img {
    26.             width: 100%;
    27.             height: 100%;
    28.             display: block;
    29.         }
    30.  
    31.         .slider-footer {
    32.             height: 80px;
    33.             background-color: rgb(100, 67, 68);
    34.             padding: 12px 12px 0 12px;
    35.             position: relative;
    36.         }
    37.  
    38.         .slider-footer .toggle {
    39.             position: absolute;
    40.             right: 0;
    41.             top: 12px;
    42.             display: flex;
    43.         }
    44.  
    45.         .slider-footer .toggle button {
    46.             margin-right: 12px;
    47.             width: 28px;
    48.             height: 28px;
    49.             appearance: none;
    50.             border: none;
    51.             background: rgba(255, 255, 255, 0.1);
    52.             color: #fff;
    53.             border-radius: 4px;
    54.             cursor: pointer;
    55.         }
    56.  
    57.         .slider-footer .toggle button:hover {
    58.             background: rgba(255, 255, 255, 0.2);
    59.         }
    60.  
    61.         .slider-footer p {
    62.             margin: 0;
    63.             color: #fff;
    64.             font-size: 18px;
    65.             margin-bottom: 10px;
    66.         }
    67.  
    68.         .slider-indicator {
    69.             margin: 0;
    70.             padding: 0;
    71.             list-style: none;
    72.             display: flex;
    73.             align-items: center;
    74.         }
    75.  
    76.         .slider-indicator li {
    77.             width: 8px;
    78.             height: 8px;
    79.             margin: 4px;
    80.             border-radius: 50%;
    81.             background: #fff;
    82.             opacity: 0.4;
    83.             cursor: pointer;
    84.         }
    85.  
    86.         .slider-indicator li.active {
    87.             width: 12px;
    88.             height: 12px;
    89.             opacity: 1;
    90.         }
    91.     style>
    92. head>
    93.  
    94. <body>
    95.     <div class="slider">
    96.         <div class="slider-wrapper">
    97.             <img src="./images/slider01.jpg" alt="" />
    98.         div>
    99.         <div class="slider-footer">
    100.             <p>对人类来说会不会太超前了？p>
    101.             <ul class="slider-indicator">
    102.                 <li class="active">li>
    103.                 <li>li>
    104.                 <li>li>
    105.                 <li>li>
    106.                 <li>li>
    107.                 <li>li>
    108.                 <li>li>
    109.                 <li>li>
    110.             ul>
    111.             <div class="toggle">
    112.                 <button class="prev"><button>
    113.                 <button class="next">>button>
    114.             div>
    115.         div>
    116.     div>
    117.     <script>
    118.         // 1. 初始数据
    119.         const sliderData = [
    120.             { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    121.             { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
    122.             { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
    123.             { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
    124.             { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
    125.             { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
    126.             { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
    127.             { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    128.         ]
    129.  
    130.         //获取元素
    131.         const img = document.querySelector('.slider-wrapper img')
    132.         const p = document.querySelector(".slider-footer p")
    133.         const footer = document.querySelector('.slider-footer')
    134.         const slider = document.querySelector(".slider")
    135.         const lis = document.querySelectorAll('.slider-indicator li')
    136.         const next = document.querySelector('.toggle .next')
    137.         const prev = document.querySelector('.toggle .prev')
    138.  
    139.         let i = 0
    140.  
    141.         //开启定时器
    142.         let timer = setInterval(function () {
    143.  
    144.             i++
    145.             if (i === sliderData.length) {
    146.                 i = 0
    147.             }
    148.             // 设置图片
    149.             img.src = sliderData[i].url
    150.             // 设置标题
    151.             p.innerHTML = sliderData[i].title
    152.  
    153.             // 设置底部区域背景色
    154.             footer.style.backgroundColor = sliderData[i].color
    155.             // 设置小圆圈样式
    156.             // 把其他某个li的active移除 再给对应的li设置
    157.             document.querySelector('.slider-indicator .active').classList.remove('active')
    158.  
    159.             lis[i].classList.add('active')
    160.  
    161.         }, 1000)
    162.     script>
    163. body>
    164.  
    165. html>

    2、点击更换

    点击那个小圆点就跳到对应位置

    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>轮播图点击切换title>
    9.   <style>
    10.     * {
    11.       box-sizing: border-box;
    12.     }
    13.  
    14.     .slider {
    15.       width: 560px;
    16.       height: 400px;
    17.       overflow: hidden;
    18.     }
    19.  
    20.     .slider-wrapper {
    21.       width: 100%;
    22.       height: 320px;
    23.     }
    24.  
    25.     .slider-wrapper img {
    26.       width: 100%;
    27.       height: 100%;
    28.       display: block;
    29.     }
    30.  
    31.     .slider-footer {
    32.       height: 80px;
    33.       background-color: rgb(100, 67, 68);
    34.       padding: 12px 12px 0 12px;
    35.       position: relative;
    36.     }
    37.  
    38.     .slider-footer .toggle {
    39.       position: absolute;
    40.       right: 0;
    41.       top: 12px;
    42.       display: flex;
    43.     }
    44.  
    45.     .slider-footer .toggle button {
    46.       margin-right: 12px;
    47.       width: 28px;
    48.       height: 28px;
    49.       appearance: none;
    50.       border: none;
    51.       background: rgba(255, 255, 255, 0.1);
    52.       color: #fff;
    53.       border-radius: 4px;
    54.       cursor: pointer;
    55.     }
    56.  
    57.     .slider-footer .toggle button:hover {
    58.       background: rgba(255, 255, 255, 0.2);
    59.     }
    60.  
    61.     .slider-footer p {
    62.       margin: 0;
    63.       color: #fff;
    64.       font-size: 18px;
    65.       margin-bottom: 10px;
    66.     }
    67.  
    68.     .slider-indicator {
    69.       margin: 0;
    70.       padding: 0;
    71.       list-style: none;
    72.       display: flex;
    73.       align-items: center;
    74.     }
    75.  
    76.     .slider-indicator li {
    77.       width: 8px;
    78.       height: 8px;
    79.       margin: 4px;
    80.       border-radius: 50%;
    81.       background: #fff;
    82.       opacity: 0.4;
    83.       cursor: pointer;
    84.     }
    85.  
    86.     .slider-indicator li.active {
    87.       width: 12px;
    88.       height: 12px;
    89.       opacity: 1;
    90.     }
    91.   style>
    92. head>
    93.  
    94. <body>
    95.   <div class="slider">
    96.     <div class="slider-wrapper">
    97.       <img src="./images/slider01.jpg" alt="" />
    98.     div>
    99.     <div class="slider-footer">
    100.       <p>对人类来说会不会太超前了？p>
    101.       <ul class="slider-indicator">
    102.         <li class="active">li>
    103.         <li>li>
    104.         <li>li>
    105.         <li>li>
    106.         <li>li>
    107.         <li>li>
    108.         <li>li>
    109.         <li>li>
    110.       ul>
    111.       <div class="toggle">
    112.         <button class="prev"><button>
    113.         <button class="next">>button>
    114.       div>
    115.     div>
    116.   div>
    117.   <script>
    118.     // 1. 初始数据
    119.     const sliderData = [
    120.       { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    121.       { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
    122.       { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
    123.       { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
    124.       { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
    125.       { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
    126.       { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
    127.       { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    128.     ]
    129.     //获取元素
    130.     const img = document.querySelector('.slider-wrapper img')
    131.         const p = document.querySelector(".slider-footer p")
    132.         const footer = document.querySelector('.slider-footer')
    133.         const slider = document.querySelector(".slider")
    134.         const lis = document.querySelectorAll('.slider-indicator li')
    135.         const next = document.querySelector('.toggle .next')
    136.         const prev = document.querySelector('.toggle .prev')
    137.  
    138. //遍历所有的li，给每个li绑定一个点击事件
    139.         for(let i=0;ilength;i++){
    140.             lis[i].addEventListener('click',function() {
    141.               //移出所有的active类
    142.               document.querySelector('.slider-indicator .active').classList.remove('active')
    143.             //谁点击谁添加active类
    144.               this.classList.add('active')
    145.               img.src = sliderData[i].url
    146.             p.innerHTML = sliderData[i].title
    147.             footer.style.backgroundColor = sliderData[i].color
    148.             })
    149.         }
    150.  
    151.   script>
    152. body>
    153.  
    154. html>

     3、自动播放加左右箭头点击切换

    需求：要自动播放

            点击左右按钮可以跳转

            鼠标移入停止自动播放，鼠标离开继续自动播放

    思路：

            需要开启定时器来实现自动播放

            给左右按钮添加点击事件

            给整体添加鼠标移入清除定时器功能

            鼠标移出添加开启定时器功能  

    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8" />
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.     <title>轮播图点击切换title>
    9.     <style>
    10.         * {
    11.             box-sizing: border-box;
    12.         }
    13.  
    14.         .slider {
    15.             width: 560px;
    16.             height: 400px;
    17.             overflow: hidden;
    18.         }
    19.  
    20.         .slider-wrapper {
    21.             width: 100%;
    22.             height: 320px;
    23.         }
    24.  
    25.         .slider-wrapper img {
    26.             width: 100%;
    27.             height: 100%;
    28.             display: block;
    29.         }
    30.  
    31.         .slider-footer {
    32.             height: 80px;
    33.             background-color: rgb(100, 67, 68);
    34.             padding: 12px 12px 0 12px;
    35.             position: relative;
    36.         }
    37.  
    38.         .slider-footer .toggle {
    39.             position: absolute;
    40.             right: 0;
    41.             top: 12px;
    42.             display: flex;
    43.         }
    44.  
    45.         .slider-footer .toggle button {
    46.             margin-right: 12px;
    47.             width: 28px;
    48.             height: 28px;
    49.             appearance: none;
    50.             border: none;
    51.             background: rgba(255, 255, 255, 0.1);
    52.             color: #fff;
    53.             border-radius: 4px;
    54.             cursor: pointer;
    55.         }
    56.  
    57.         .slider-footer .toggle button:hover {
    58.             background: rgba(255, 255, 255, 0.2);
    59.         }
    60.  
    61.         .slider-footer p {
    62.             margin: 0;
    63.             color: #fff;
    64.             font-size: 18px;
    65.             margin-bottom: 10px;
    66.         }
    67.  
    68.         .slider-indicator {
    69.             margin: 0;
    70.             padding: 0;
    71.             list-style: none;
    72.             display: flex;
    73.             align-items: center;
    74.         }
    75.  
    76.         .slider-indicator li {
    77.             width: 8px;
    78.             height: 8px;
    79.             margin: 4px;
    80.             border-radius: 50%;
    81.             background: #fff;
    82.             opacity: 0.4;
    83.             cursor: pointer;
    84.         }
    85.  
    86.         .slider-indicator li.active {
    87.             width: 12px;
    88.             height: 12px;
    89.             opacity: 1;
    90.         }
    91.     style>
    92. head>
    93.  
    94. <body>
    95.     <div class="slider">
    96.         <div class="slider-wrapper">
    97.             <img src="./images/slider01.jpg" alt="" />
    98.         div>
    99.         <div class="slider-footer">
    100.             <p>对人类来说会不会太超前了？p>
    101.             <ul class="slider-indicator">
    102.                 <li class="active">li>
    103.                 <li>li>
    104.                 <li>li>
    105.                 <li>li>
    106.                 <li>li>
    107.                 <li>li>
    108.                 <li>li>
    109.                 <li>li>
    110.             ul>
    111.             <div class="toggle">
    112.                 <button class="prev"><button>
    113.                 <button class="next">>button>
    114.             div>
    115.         div>
    116.     div>
    117.     <script>
    118.         // 1. 初始数据
    119.         const sliderData = [
    120.             { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    121.             { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
    122.             { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
    123.             { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
    124.             { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
    125.             { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
    126.             { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
    127.             { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    128.         ]
    129.         const img = document.querySelector('.slider-wrapper img')
    130.         const p = document.querySelector(".slider-footer p")
    131.         const footer = document.querySelector('.slider-footer')
    132.         const slider = document.querySelector(".slider")
    133.         const lis = document.querySelectorAll('.slider-indicator li')
    134.         const next = document.querySelector('.toggle .next')
    135.         const prev = document.querySelector('.toggle .prev')
    136.  
    137.         let i = 0
    138.  
    139.         //开启定时器
    140.         let timer = setInterval(function () {
    141.  
    142.             i++
    143.             if (i === sliderData.length) {
    144.                 i = 0
    145.             }
    146.             img.src = sliderData[i].url
    147.             p.innerHTML = sliderData[i].title
    148.             footer.style.backgroundColor = sliderData[i].color
    149.  
    150.             document.querySelector('.slider-indicator .active').classList.remove('active')
    151.  
    152.             lis[i].classList.add('active')
    153.  
    154.         }, 1000)
    155.  
    156.         next.addEventListener('click', function () {
    157.             i++
    158.             if (i === sliderData.length) {
    159.                 i = 0
    160.             }
    161.             img.src = sliderData[i].url
    162.             p.innerHTML = sliderData[i].title
    163.             footer.style.backgroundColor = sliderData[i].color
    164.  
    165.             document.querySelector('.slider-indicator .active').classList.remove('active')
    166.  
    167.             lis[i].classList.add('active')
    168.  
    169.  
    170.         })
    171.         prev.addEventListener('click',function() {
    172.             i--
    173.             if (i< 0) {
    174.                 i = sliderData.length
    175.             }
    176.             img.src = sliderData[i].url
    177.             p.innerHTML = sliderData[i].title
    178.             footer.style.backgroundColor = sliderData[i].color
    179.  
    180.             document.querySelector('.slider-indicator .active').classList.remove('active')
    181.  
    182.             lis[i].classList.add('active')
    183.  
    184.         })
    185.  
    186.         slider.addEventListener('mouseenter', function () {
    187.             clearInterval(timer)
    188.         })
    189.         slider.addEventListener('mouseleave', function () {
    190.             timer = setInterval(function () {
    191.  
    192.                 i++
    193.                 if (i === sliderData.length) {
    194.                     i = 0
    195.                 }
    196.                 img.src = sliderData[i].url
    197.                 p.innerHTML = sliderData[i].title
    198.                 footer.style.backgroundColor = sliderData[i].color
    199.  
    200.                 document.querySelector('.slider-indicator .active').classList.remove('active')
    201.  
    202.                 lis[i].classList.add('active')
    203.  
    204.             }, 1000)
    205.  
    206.         })
    207.  
    208.  
    209.     script>
    210. body>
    211.  
    212. html>

    优化代码：把重复的代码封装成一个为toggle() 的函数，哪里需要，哪里调用，减少代码冗余

    1. DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>轮播图点击切换title>
    8.     <style>
    9.       * {
    10.         box-sizing: border-box;
    11.       }
    12.  
    13.       .slider {
    14.         width: 560px;
    15.         height: 400px;
    16.         overflow: hidden;
    17.       }
    18.  
    19.       .slider-wrapper {
    20.         width: 100%;
    21.         height: 320px;
    22.       }
    23.  
    24.       .slider-wrapper img {
    25.         width: 100%;
    26.         height: 100%;
    27.         display: block;
    28.       }
    29.  
    30.       .slider-footer {
    31.         height: 80px;
    32.         background-color: rgb(100, 67, 68);
    33.         padding: 12px 12px 0 12px;
    34.         position: relative;
    35.       }
    36.  
    37.       .slider-footer .toggle {
    38.         position: absolute;
    39.         right: 0;
    40.         top: 12px;
    41.         display: flex;
    42.       }
    43.  
    44.       .slider-footer .toggle button {
    45.         margin-right: 12px;
    46.         width: 28px;
    47.         height: 28px;
    48.         appearance: none;
    49.         border: none;
    50.         background: rgba(255, 255, 255, 0.1);
    51.         color: #fff;
    52.         border-radius: 4px;
    53.         cursor: pointer;
    54.       }
    55.  
    56.       .slider-footer .toggle button:hover {
    57.         background: rgba(255, 255, 255, 0.2);
    58.       }
    59.  
    60.       .slider-footer p {
    61.         margin: 0;
    62.         color: #fff;
    63.         font-size: 18px;
    64.         margin-bottom: 10px;
    65.       }
    66.  
    67.       .slider-indicator {
    68.         margin: 0;
    69.         padding: 0;
    70.         list-style: none;
    71.         display: flex;
    72.         align-items: center;
    73.       }
    74.  
    75.       .slider-indicator li {
    76.         width: 8px;
    77.         height: 8px;
    78.         margin: 4px;
    79.         border-radius: 50%;
    80.         background: #fff;
    81.         opacity: 0.4;
    82.         cursor: pointer;
    83.       }
    84.  
    85.       .slider-indicator li.active {
    86.         width: 12px;
    87.         height: 12px;
    88.         opacity: 1;
    89.       }
    90.     style>
    91.   head>
    92.  
    93.   <body>
    94.     <div class="slider">
    95.       <div class="slider-wrapper">
    96.         <img src="./images/slider01.jpg" alt="" />
    97.       div>
    98.       <div class="slider-footer">
    99.         <p>对人类来说会不会太超前了？p>
    100.         <ul class="slider-indicator">
    101.           <li class="active">li>
    102.           <li>li>
    103.           <li>li>
    104.           <li>li>
    105.           <li>li>
    106.           <li>li>
    107.           <li>li>
    108.           <li>li>
    109.         ul>
    110.         <div class="toggle">
    111.           <button class="prev"><button>
    112.           <button class="next">>button>
    113.         div>
    114.       div>
    115.     div>
    116.     <script>
    117.       // 1. 初始数据
    118.       const sliderData = [
    119.         {
    120.           url: './images/slider01.jpg',
    121.           title: '对人类来说会不会太超前了？',
    122.           color: 'rgb(100, 67, 68)',
    123.         },
    124.         {
    125.           url: './images/slider02.jpg',
    126.           title: '开启剑与雪的黑暗传说！',
    127.           color: 'rgb(43, 35, 26)',
    128.         },
    129.         {
    130.           url: './images/slider03.jpg',
    131.           title: '真正的jo厨出现了！',
    132.           color: 'rgb(36, 31, 33)',
    133.         },
    134.         {
    135.           url: './images/slider04.jpg',
    136.           title: '李玉刚：让世界通过B站看到东方大国文化',
    137.           color: 'rgb(139, 98, 66)',
    138.         },
    139.         {
    140.           url: './images/slider05.jpg',
    141.           title: '快来分享你的寒假日常吧~',
    142.           color: 'rgb(67, 90, 92)',
    143.         },
    144.         {
    145.           url: './images/slider06.jpg',
    146.           title: '哔哩哔哩小年YEAH',
    147.           color: 'rgb(166, 131, 143)',
    148.         },
    149.         {
    150.           url: './images/slider07.jpg',
    151.           title: '一站式解决你的电脑配置问题！！！',
    152.           color: 'rgb(53, 29, 25)',
    153.         },
    154.         {
    155.           url: './images/slider08.jpg',
    156.           title: '谁不想和小猫咪贴贴呢！',
    157.           color: 'rgb(99, 72, 114)',
    158.         },
    159.       ]
    160.  
    161.       // 找到相关元素
    162.       const oImg = document.querySelector('.slider-wrapper > img')
    163.       const title = document.querySelector('.slider-footer > p')
    164.       const sliderFooter = document.querySelector('.slider-footer')
    165.       const lis = document.querySelectorAll('.slider-indicator li')
    166.       const prev = document.querySelector('.prev')
    167.       const next = document.querySelector('.next')
    168.       const slider = document.querySelector('.slider')
    169.  
    170.       // 定义一个变量
    171.       let i = 0
    172.       // 开启定时器 开启自动播放
    173.       let timerId = setInterval(function() {
    174.         // i++
    175.         // if (i === sliderData.length) {
    176.         //   i = 0
    177.         // }
    178.         // toggle()
    179.  
    180.         // 方式二 模拟点击右侧按钮
    181.         next.click()
    182.       }
    183.       , 1500)
    184.  
    185.       // 给右侧按钮绑定事件
    186.       next.addEventListener('click', function () {
    187.         i++
    188.         if (i === sliderData.length) {
    189.           i = 0
    190.         }
    191.         toggle()
    192.       })
    193.  
    194.       // 给左侧按钮绑定事件
    195.       prev.addEventListener('click', function () {
    196.         i--
    197.         if (i < 0) {
    198.           i = sliderData.length - 1
    199.         }
    200.         toggle()
    201.       })
    202.  
    203.       // 给slider绑定鼠标移入事件
    204.       slider.addEventListener('mouseenter', function () {
    205.         clearInterval(timerId)
    206.       })
    207.       // 给slider绑定鼠标移出事件
    208.       slider.addEventListener('mouseleave', function () {
    209.         timerId = setInterval(function () {
    210.          next.click()
    211.         }, 1500)
    212.       })
    213.  
    214.       // 切换
    215.       function toggle() {
    216.         // 设置图片
    217.         oImg.src = sliderData[i].url
    218.         // 设置标题
    219.         title.innerHTML = sliderData[i].title
    220.         // 设置底部区域背景色
    221.         sliderFooter.style.backgroundColor = sliderData[i].color
    222.         // 设置小圆圈样式
    223.         // 把其他某个li的active移除 再给对应的li设置
    224.         document
    225.           .querySelector('.slider-indicator .active').classList.remove('active')
    226.         // lis[i].classList.add('active') 方式二
    227.         document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    228.       }
    229.     script>
    230.   body>
    231. html>

    4、完整版轮播图

    结合以上所有功能，是一个综合

    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8" />
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.     <title>轮播图点击切换title>
    9.     <style>
    10.         * {
    11.             box-sizing: border-box;
    12.         }
    13.  
    14.         .slider {
    15.             width: 560px;
    16.             height: 400px;
    17.             overflow: hidden;
    18.         }
    19.  
    20.         .slider-wrapper {
    21.             width: 100%;
    22.             height: 320px;
    23.         }
    24.  
    25.         .slider-wrapper img {
    26.             width: 100%;
    27.             height: 100%;
    28.             display: block;
    29.         }
    30.  
    31.         .slider-footer {
    32.             height: 80px;
    33.             background-color: rgb(100, 67, 68);
    34.             padding: 12px 12px 0 12px;
    35.             position: relative;
    36.         }
    37.  
    38.         .slider-footer .toggle {
    39.             position: absolute;
    40.             right: 0;
    41.             top: 12px;
    42.             display: flex;
    43.         }
    44.  
    45.         .slider-footer .toggle button {
    46.             margin-right: 12px;
    47.             width: 28px;
    48.             height: 28px;
    49.             appearance: none;
    50.             border: none;
    51.             background: rgba(255, 255, 255, 0.1);
    52.             color: #fff;
    53.             border-radius: 4px;
    54.             cursor: pointer;
    55.         }
    56.  
    57.         .slider-footer .toggle button:hover {
    58.             background: rgba(255, 255, 255, 0.2);
    59.         }
    60.  
    61.         .slider-footer p {
    62.             margin: 0;
    63.             color: #fff;
    64.             font-size: 18px;
    65.             margin-bottom: 10px;
    66.         }
    67.  
    68.         .slider-indicator {
    69.             margin: 0;
    70.             padding: 0;
    71.             list-style: none;
    72.             display: flex;
    73.             align-items: center;
    74.         }
    75.  
    76.         .slider-indicator li {
    77.             width: 8px;
    78.             height: 8px;
    79.             margin: 4px;
    80.             border-radius: 50%;
    81.             background: #fff;
    82.             opacity: 0.4;
    83.             cursor: pointer;
    84.         }
    85.  
    86.         .slider-indicator li.active {
    87.             width: 12px;
    88.             height: 12px;
    89.             opacity: 1;
    90.         }
    91.     style>
    92. head>
    93.  
    94. <body>
    95.     <div class="slider">
    96.         <div class="slider-wrapper">
    97.             <img src="./images/slider01.jpg" alt="" />
    98.         div>
    99.         <div class="slider-footer">
    100.             <p>对人类来说会不会太超前了？p>
    101.             <ul class="slider-indicator">
    102.                 <li class="active">li>
    103.                 <li>li>
    104.                 <li>li>
    105.                 <li>li>
    106.                 <li>li>
    107.                 <li>li>
    108.                 <li>li>
    109.                 <li>li>
    110.             ul>
    111.             <div class="toggle">
    112.                 <button class="prev"><button>
    113.                 <button class="next">>button>
    114.             div>
    115.         div>
    116.     div>
    117.     <script>
    118.         // 1. 初始数据
    119.         const sliderData = [
    120.             { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    121.             { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
    122.             { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
    123.             { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
    124.             { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
    125.             { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
    126.             { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
    127.             { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    128.         ]
    129.         const img = document.querySelector('.slider-wrapper img')
    130.         const p = document.querySelector(".slider-footer p")
    131.         const footer = document.querySelector('.slider-footer')
    132.         const slider = document.querySelector(".slider")
    133.         const lis = document.querySelectorAll('.slider-indicator li')
    134.         const next = document.querySelector('.toggle .next')
    135.         const prev = document.querySelector('.toggle .prev')
    136.  
    137.         let i = 0
    138.  
    139.  
    140.         //开启定时器
    141.         let timer = setInterval(function () {
    142.  
    143.  
    144.             next.click()
    145.  
    146.         }, 1000)
    147.  
    148.         //右侧点击
    149.         next.addEventListener('click', function () {
    150.             i++
    151.             if (i === sliderData.length) {
    152.                 i = 0
    153.             }
    154.  
    155.             toggle()
    156.  
    157.  
    158.         })
    159.         //左侧点击
    160.         prev.addEventListener('click', function () {
    161.             i--
    162.             if (i < 0) {
    163.                 i = sliderData.length
    164.             }
    165.  
    166.  
    167.             toggle()
    168.  
    169.  
    170.         })
    171.  
    172.         //鼠标移入清除定时器
    173.         slider.addEventListener('mouseenter', function () {
    174.             clearInterval(timer)
    175.         })
    176.         //鼠标移出，开启定时器
    177.         slider.addEventListener('mouseleave', function () {
    178.             timer = setInterval(function () {
    179.  
    180.                 next.click()
    181.  
    182.             }, 1000)
    183.  
    184.         })
    185.         //给每个li(小圆点)设置点击事件
    186.         for (let j = 0; j < lis.length; j++) {
    187.             lis[j].addEventListener('click', function () {
    188.                 document.querySelector('.slider-indicator .active').classList.remove('active')
    189.                 this.classList.add('active')
    190.                 img.src = sliderData[j].url
    191.                 p.innerHTML = sliderData[j].title
    192.                 footer.style.backgroundColor = sliderData[j].color
    193.                 i = j
    194.             })
    195.         }
    196.         //相同代码封装成一个函数，方便复用
    197.         function toggle() {
    198.             img.src = sliderData[i].url
    199.             p.innerHTML = sliderData[i].title
    200.             footer.style.backgroundColor = sliderData[i].color
    201.  
    202.             document.querySelector('.slider-indicator .active').classList.remove('active')
    203.  
    204.             lis[i].classList.add('active')
    205.  
    206.         }
    207.  
    208.  
    209.     script>
    210. body>
    211.  
    212. html>

     

  • 相关阅读:
    spring-aop源码分析(2)_AnnotationAwareAspectJAutoProxyCreator后置处理器
    桥接模式简介
    Python数据分析与可视化期末简答题复习
    springcloudalibaba架构(17):Gateway网关限流
    ttkefu客服系统的优势及应用领域
    “2024杭州智慧城市及安防展会”将于4月在杭州博览中心盛大召开
    2.3.1 交换机的链路聚合技术
    关于计算机丢失MSVCP140.dll是什么意思？MSVCP140.dll缺失的5个解决方案分享
    计算机网络初识
    DVWA环境的配置
  • 原文地址：https://blog.csdn.net/m0_56713342/article/details/134405555