首页课程Javascript趣味课堂图像幻灯片

图像幻灯片

目录列表

图像幻灯片

图像幻灯片

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

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

<div>
  <button> 上一个 </button>
  <img id="slider" src="https://www.w3cschool.cn/statics/images/logo.png" />
  <button> 下一个 </button>
</div>

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

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:

<div>
  <button onclick="prev()"> 上一个 </button>
  <img id="slider" src="https://www.PHP.cn/statics/images/1.png" />
  <button onclick="next()"> 下一个 </button>
</div>

JS:

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;