用 JavaScript + HTML + CSS 中的 DOM 操作来实现，轮播图的循环播放和顺序播放等功能_js css设置轮播顺序无限循环

作者：小舞很执着 | 2024-07-09 22:06:43

踩

js css设置轮播顺序无限循环

Ⅰ、问题描述：

1、用JavaScript + html + css 实现，轮播图的循环播放和顺序播放等功能；
2、分析：
A、需要用 html + css 实现盒子模型的布局，呈现出轮播图的大致形状；
B、调用 JavaScript 中的 DOM 操作，实现加载信息的函数、左箭头事件绑定、右箭头事件绑定；
C、最后通过 DOM 操作实现轮播图的顺序播放事件的绑定、循环播放事件的绑定；

Ⅱ、实现过程如下：

1、运行软件VScode，亲测可实现；
2、运行代码：

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #controls {
      width: 400px;
      margin: auto;
      text-align: center;
    }

    #container {
      width: 400px;
      height: 400px;
      border: 10px solid #eee;
      background-color: gray;
      margin: 10px auto 0;
      position: relative;
    }

    #prev,
    #next {
      position: absolute;
			background: black;
			filter:alpha(opacity=40);  /*该语句时为了兼容性问题，opacity(透明度) 是为了 IE8 以上的浏览器可直接使用，   而 'filter:alpha(opacity=40);(透明度)' 是为了低版本浏览器兼容用的； */
			opacity: 0.4;
			font-size: 20px;
			color: white;
			width: 40px;
			height: 40px;
			border: 2px solid white;
			line-height: 40px;
			text-align: center;
			top: 180px;
			cursor: pointer;
			text-decoration: none;
    }

    #prev:hover,
    #next:hover 
    {
      opacity: 0.8;
      filter: alpha(opacity=80);
    }

    #order,
    #info 
    {
      position: absolute;
			width:100%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background: black;
			filter:alpha(opacity=60);
			opacity: 0.6;
			font-size: 20px;
			color: white;
    }
    
    #prev {
			left: 0;
		}
		#next {
			right: 0;
		}
		#picture {
			height: 400px;
			width: 400px;
		}
		#order {
			top: 0;
		}
		#info {
			bottom: 0;
		}
  </style>
</head>
<body>
  <div id="controls">
    <input type="button" value="循环播放" id="round">
    <input type="button" value="顺序播放" id="single">
  </div>
  <div id="container">
    <a href="javascript:" id="prev">&lt;</a>
    <a href="javascript:" id="next">&gt;</a>
    <div id="order">图片加载中……</div>
    <div id="info">图片加载中……</div>
    <img id="picture">
  </div>
  <script type="text/javascript">
    var imgArr = ['6.jpg','7.jpg','8.jpg','9.jpg']; 
       //将图片的位置信息放在数组里；
    var txtArr = ['图片一','图片二','图片三','图片四'];
       //将对应的图片信息能放在盒子中；
    var index = 0;
    var flag = true; //代表默认的情况是：顺序播放事件；

    function $(id) { //封装函数，根据 id 找元素；
      return document.getElementById(id);
    }

    function showData() { //封装函数，根据 id 将盒子中的图片，修改文字等放在盒子的相关位置上；
      $('order').innerHTML = (index+1) + '/' + imgArr.length; //显示1/4、2/4....等信息；
      $('info').innerHTML = txtArr[index]; //显示是图片几 (即：txtArr 中内容);
      $('picture').src = imgArr[index];   //显示是第几张图片 (即：imgArr 中信息);
    }
    showData(); //千万别忘了运行该函数；


    //左箭头事件绑定；
    $('prev').onclick = function() {
      index--;
      if( flag && index === -1) {  //flag 为 true 代表其是顺序播放；
        index = 0;
        alert('已经是第一张了！');
      } else if(!flag && index === -1){ //flag 为 false 代表其是循环播放；
        index = imgArr.length - 1;
      }
      showData(); //运行加载信息的函数；
    }

    //右箭头事件绑定；
    $('next').onclick = function() {
      index++;
      if( flag && index === imgArr.length) { //flag 为 true 代表其是顺序播放；
        index = imgArr.length - 1;
        alert('已经是最后一张了！');
      } else if ( !flag && index === imgArr.length) {//flag 为 false 代表其是循环播放；
        index = 0;
      }
      showData(); //运行加载信息的函数；
    }


    //顺序播放事件绑定；
    $('single').onclick = function() {
      flag = true;   //表示：当点击'开始顺序播放了'按钮时，就将 flag 的值转换成 true ，以备触发事件时使用；
      alert('开始顺序播放了');
    }

    //循环播放事件绑定；
    $('round').onclick = function() {
      flag = false; //表示：当点击'开始循环播放了'按钮时，就将 flag 的值转换成 false ，以备触发事件时使用；
      alert('开始循环播放了');
    }
  </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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

3、注意：
A、我没有附上图片的信息，自己可以随便找到四张照片，图片的名字与位置和数组 imgArr 中的保持一致即可；
B、若自己实现不了，可以找我上传的文档拿下来就可以在浏览器或 VScode，以及其他软件上可直接实现，地址为：

https://download.csdn.net/download/weixin_43405300/19627780?spm=1001.2014.3001.5503

4、结果展示：
A、顺序播放，结果展示：
在这里插入图片描述
其一、点击顺序播放按钮后；

其二、随便的一张图片展示：
在这里插入图片描述

其三、点击到第一张后，再点击左箭头的显示结果；
在这里插入图片描述
其四、点击到最后一张后，再点击右箭头的显示结果；

B、循环播放，结果展示：
其一、点击顺序播放按钮后；

其二、随便的一张图片展示：

其三、点击到第一张后，再点击左箭头的显示结果；(即：它会回到第四页)
在这里插入图片描述

其四、点击到最后一张后，再点击右箭头的显示结果；(即：它会回到第一页)
在这里插入图片描述

Ⅲ、小结：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！

如果看完博客之后，还运行不成功，再附上已传文档的链接地址：

https://download.csdn.net/download/weixin_43405300/19627780?spm=1001.2014.3001.5503

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/803830

用 JavaScript + HTML + CSS 中的 DOM 操作来实现，轮播图的 循环播放 和 顺序播放 等功能_js css设置轮播顺序无限循环

Ⅰ、问题描述：

Ⅱ、实现过程如下：

Ⅲ、小结：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！

用 JavaScript + HTML + CSS 中的 DOM 操作来实现，轮播图的循环播放和顺序播放等功能_js css设置轮播顺序无限循环