JavaScript

钟佩颖

已于 2024-07-27 23:03:08 修改

阅读量160

点赞数 3

分类专栏：前端文章标签： javascript 前端开发语言 ecmascript

于 2024-07-21 22:46:28 首次发布

本文链接：https://blog.csdn.net/weixin_63627378/article/details/140594472

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS简介

JS的组成

JavaScript 书写位置

内部

外部

行内（内嵌）

总结

注释

JS结束符

JS输入输出语法

输出

输入

执行顺序

字面量

变量

变量的理解

变量的基本使用

变量的本质

变量命名规则与规范

let和var

数组

增加

删除

数组排序函数（sort）

常量

数据类型

基本数据类型

number 数字型

算数优先级

NaN

String 字符串类型

字符串拼接

boolean 布尔类型

undefined 未定义类型

null 空类型

let obj=null typeof为object

引用数据类型

Object

控制台小技巧

检测数据类型（typeof）

数据转换

隐式转化

显式转换

运算符

赋值运算符

一元运算符

比较运算符

逻辑运算符

运算符优先级

表达式和语句

区别

分支语句

if语句

三元运算符

switch语句

断点调试

循环语句

while循环

for循环

总结

函数

函数概念

函数声明

函数命名规范

函数调用

函数传参

参数默认值

函数返回值

作用域

匿名函数

逻辑中断

对象

对象的声明

对象的使用

对象的遍历

内置对象

Math

生成任意范围随机数

拓展

数组相当于一个新的对象

WebAPI

作用和分类

DOM

获取DOM对象

其他获取DOM元素的方法

操作元素内容

操作元素的属性

操作表单元素属性

自定义属性

定时器-间歇函数

事件监听（绑定）

事件监听版本

事件类型

<!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, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    // for(let i=0;i<sliderData.length;i++){
    //   let img=document.querySelector(".slider-wrapper img");
    //   // let num=Math.floor(Math.random()*sliderData.length);
    //   img.src=sliderData[i].url;
    //   console.log(img.src);
    // }

    let i = 0;
    let img = document.querySelector(".slider-wrapper img");
    let right = document.querySelector('.next');
    let p = document.querySelector('.slider-footer p');
    let footer = document.querySelector('.slider-footer')
    let left = document.querySelector('.prev');
    let slider = document.querySelector('.slider');

  

    let timee=setInterval(function () {
      right.click();
      // img.src = sliderData[i].url
      // p.innerHTML = sliderData[i].title
      // footer.style.backgroundColor = sliderData[i].color
      // i++;
      // i=i%sliderData.length;
      // document.querySelector(".slider-indicator .active").classList.remove("active")
      // document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active');
    }, 1000)

    right.addEventListener('click', function () {
      // sliderData.url = sliderData.url + 1;
      // console.log(11);
      // i++;
      // i++;
      // if(i>=8){
      //     i=0;
      // }
      i++;
      i = i % sliderData.length;
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      footer.style.backgroundColor = sliderData[i].color
      // console.log(bgc);
      document.querySelector(".slider-indicator .active").classList.remove("active")
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active');
    })

    left.addEventListener('click', function () {
      // sliderData.url = sliderData.url + 1;
      // console.log(11);
      // i++;
      // i++;
      // if(i>=8){
      //     i=0;
      // }
      i--;
      i = (i + sliderData.length) % sliderData.length;
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      footer.style.backgroundColor = sliderData[i].color
      // console.log(bgc);
      document.querySelector(".slider-indicator .active").classList.remove("active")
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active');
    })

    slider.addEventListener('mouseenter', function () {
      clearInterval(timee);
    })
    slider.addEventListener('mouseleave', function () {
      clearInterval(timee);
      timee=setInterval(function () {
        right.click();
      }, 1000)
    })

  </script>
</body>

</html>