简单版轮播图

最新推荐文章于 2024-03-29 08:09:33 发布

史蒂文·月

最新推荐文章于 2024-03-29 08:09:33 发布

阅读量108

点赞数 1

分类专栏： JavaScript 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_62371650/article/details/126180150

版权

在这里插入图片描述
1.左右两个箭头,定义初始值为0,点右边加一,同时给作为小圆点的索引
点左箭头时, 第一张图是,重置初始值为数组的长度-1
2.设置定时器,里面调用右箭头
3.当鼠标移入时,清除定时器,鼠标移除时,开启定时器

<!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>轮播图点击切换</title>
  <style>
    * {
     
      box-sizing: border-box;
    }

    .slider {
     
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
     
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
     
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
     
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
     
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
     
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255,