Community
Learn
Tools Library
AI Tools
Leisure
search
English
首页 > 课程 > Javascript fun class > image slideshow

image slideshow

目录列表

图像幻灯片

图像幻灯片

现在我们可以创建一个示例图像幻灯片项目。将使用“下一个”和“上一个”按钮更改图像。

现在，我们来创建我们的HTML，其中包括一个图像和两个导航按钮：

1

2

3

4

5

<div>

  <button> 上一个 </button>

  <img id="slider" src="https://www.w3cschool.cn/statics/images/logo.png" />

  <button> 下一个 </button>

</div>

接下来，让我们在数组中定义我们的示例图像：

1

2

3

4

5

var images = [

   "https://www.w3cschool.cn/statics/images/1.png", 

   "https://www.w3cschool.cn/statics/images/2.png, 

   "https://www.w3cschool.cn/statics/images/3.png"

];

提示: 我们将使用我们上传到我们的服务器的三个示例图像。您可以使用任意数量的图像。


填空，定义数组。

arr = 'A','B','C';

图像幻灯片

图像幻灯片

现在我们需要处理 "上一个" 和 "下一个" 按钮点击并调用相应的功能来更改图像。

HTML:

1

2

3

4

5

<div>

  <button onclick="prev()"> 上一个 </button>

  <img id="slider" src="https://www.PHP.cn/statics/images/1.png" />

  <button onclick="next()"> 下一个 </button>

</div>

JS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var images = [

   "https://www.PHP.cn/statics/images/1.png", 

   "https://www.PHP.cn/statics/images/2.png, 

   "https://www.PHP.cn/statics/images/3.png"

];

var num = 0;

function next() {

  var slider = document.getElementById("slider");

  num++;

  if(num >= images.length) {

    num = 0;

  }

  slider.src = images[num];

  }

function prev() {

  var slider = document.getElementById("slider");

  num--;

  if(num < 0) {

    num = images.length-1;

  }

  slider.src = images[num];

}

提示: num 变量保存当前图像。下一个和上一个按钮点击由他们相应的功能来处理，这些功能会将图像的源更改为数组中的下一个/上一个图像。 


用户点击两次后，该段落的内容是什么？&lt;p id='txt' onclick='test();'&gt;20&lt;/p&gt; &lt;script&gt; function test() { var x=document.getElementById('txt'); var n = x.innerHTML; x.innerHTML = n/2; } &lt;/script&gt;

1/4
继续