Js轮播图

效果图
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style-type: none;
    }
    a{
      text-decoration: none;
    }
    .box{
      width: 1226px;
      height: 460px;
      margin:  0 auto;
      position: relative;
    }
    .box>img{
      width: 100%;
      height: 100%;
    }
    .left,.right{
      width: 41px;
      height: 69px;
      background-color: skyblue;
      position: absolute;
      top: 50%;
      margin-top: -34.5px;
      /* 光标转换为小手 */
      cursor: pointer;
    }
    .left{
      left: 0;
    }
    .right{
      right: 0;
    }
    .circle{
      position: absolute;
      right: 30px;
      bottom: 20px;
    }
    .circle>li{
      width: 6px;
      height: 6px;
      background-color: rgba(0,0,0,.4);
      border: 2px solid rgba(0,0,0,.3);
      border-radius: 50%;
      float: left;
      margin: 0 4px;
      cursor: pointer;
    }
  style>
head>
<body>
<div class="box">
  <img src="images/img1.webp" alt="" id='img'>
  <div class="left">div>
  <div class="right">div>
  <ul class="circle">
    <li onclick="fun(0);">li>
    <li onclick="fun(1);">li>
    <li onclick="fun(2);">li>
    <li onclick="fun(3);">li>
    <li onclick="fun(4);">li>
  ul>
div>
<script>
  // 存储图片
  var imgArr = ['img1.webp','img2.webp','img3.jpg','img4.webp','img5.webp'];
  //                0           1            2           3         4

  //声明变量 表示数组的下标
  var i = 0;//全局变量

  //获取元素
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  var img = document.getElementById('img');
  var list = document.querySelectorAll('.circle>li');
  console.log(list);


  //绑定点击事件
  right.onclick = function(){
    //图片下一张  数组下标+1
    i++;//相当于 i = i + 1

    //当下标大于4  也就是当第五张显示完  显示第一张
    if(i > 4){
      i = 0;//数组下标赋值为0
    }

    //设置图片路径   图片.src = '路径'
    img.src = 'images/' + imgArr[i];
  };


  left.onclick = function(){
    // 图片上一张  数组下标-1
    i--;

    // 当第一张显示完 再点击  显示第五张
    if(i < 0){
      i = 4
    }

    //设置图片路径   图片.src = '路径'
    img.src = 'images/' + imgArr[i];

  };

  // 定义函数  切换图片
  function fun(index){
    //当index  和 数组下标相等时  对应的图片显示

    // 拿到数组的所有下标
    for(var i = 0; i < imgArr.length; i++){
      //i  0 1 2 3 4

      // 判断i  和  index    当和index相等时   对应的图片显示
      if(i === index){
        img.src = 'images/' + imgArr[i];
        list[i].style.backgroundColor = 'rgba(255,255,255,.3)'
      }else{
        list[i].style.backgroundColor = '';
      }
    }
  }

script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

相关阅读:
细聊工作中常见的分支开发模式
Rust Tauri & OpenCV 写一个桌面摄像头
泰克Tektronix示波器软件TDS1012|TDS2002|TDS2004上位机软件NS-Scope
【软件测试】自动化测试selenium
PyTorch笔记 - Attention Is All You Need (2)
Linux系统下git相关使用
Python函数：chr()和ord()
11、matlab将日期和字符串写入EXCEL，并将EXCEL数据读取另存为数字、元胞和结构体形式
在数据链路层扩展以太网
vulnhub digitalworld.local: DEVELOPMENT

原文地址：https://blog.csdn.net/weixin_57780589/article/details/127901903