• Web APIs——轮播图完整版

    轮播图点击切换

    需求：当点击左右按钮，可以切换轮播图

    分析：

    ①：右侧按钮点击，变量++，如果大于等于8，则复原0

    ②：左侧按钮点击，变量--，如果小于0，则复原最后一张

    ③：鼠标经过暂停定时器

    ④：鼠标离开开启定时器

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

     

  • 相关阅读:
    11 Fork/Join
    9.Springboot整合Security很全
    信奥中的数学：排列组合
    使用jdbc技术，在数据库中存储大数据对象（使用字节IO流读取图片等给blob等二进制类型数据赋值）
    windows11本地深度学习环境搭建Anacond，keras，tensorflow，pytorch， jupyter notebook
    java毕业设计奇妙店铺电子商务网站源码+lw文档+mybatis+系统+mysql数据库+调试
    【LeetCode】Day122-根据字符出现频率排序 & 最接近原点的 K 个点
    TypeScript(三)面向对象
    富格林：学习安全技能阻挠诱导虚假
    设计模式之策略模式【内附通过工厂方法+枚举实现根据参数调用不同的策略】
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/134026082