【基于HTML5的网页设计及应用】——轮播图

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：​​​​​​数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

​​​​​​🥽Linux：​​​​Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

目录

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示

---

🎯功能简介

这段代码实现了一个简单的图片轮播效果，具体功能包括：
- 在页面中展示了一个宽度为100%，高度为400px的轮播图容器（`.wrapper`），包含了四张图片（id分别为`img1`至`img4`）和四个链接（id分别为`btn1`至`btn4）。
- 初始显示第一张图片，其余图片隐藏（通过`style="display:none;"`属性实现）。
- 链接部分（`.links`）包含了四个链接，每个链接对应一张图片，点击链接可以切换到对应的图片。同时设置了鼠标悬停和移出事件，触发对应的图片切换函数。
- JavaScript部分定义了变量`NowImg`表示当前显示的图片序号，初始值为2（即第二张图片），`MaxImg`表示图片总数为4。
- `show()`函数用来根据传入的参数或当前序号显示对应的图片，并更新链接的样式，实现图片切换效果。
- 使用`setInterval()`方法设定定时器，每隔1.5秒自动切换到下一张图片。
- `star()`函数用于重新启动定时器，保证鼠标移出链接后继续轮播。

总体而言，这段代码实现了一个基础的轮播图效果，用户可以通过点击链接或自动播放来浏览不同的图片。

🎯代码解析

<div class="wrapper">
    <div class="container">
      <img src="images/01.jpg" id="img1" />
      <img src="images/02.jpg" id="img2" style="display:none;" />
      <img src="images/03.jpg" id="img3" style="display:none;" />
      <img src="images/04.jpg" id="img4" style="display:none;" />
    </div>
    <div class="links">
      <a href="javascript:;" class="a2" id="btn1" onmouseover="show(1)" onmouseout="star()">1</a>
      <a href="javascript:;" class="a1" id="btn2" onmouseover="show(2)" onmouseout="star()">2</a>
      <a href="javascript:;" class="a1" id="btn3" onmouseover="show(3)" onmouseout="star()">3</a>
      <a href="javascript:;" class="a1" id="btn4" onmouseover="show(4)" onmouseout="star()">4</a>
    </div>
  </div>

• 在container类中包含了四张图片，分别是id为img1、img2、img3和img4的图片，初始只显示第一张图片，其余图片设置为不显示（style="display:none;"）。
• 在links类中包含了四个链接，通过点击这些链接可以切换显示对应的图片，每个链接上设置了不同的id和事件处理函数。

var NowImg = 2;
var MaxImg = 4;
var timer; 
var imgs = document.querySelectorAll(".container img");
var links = document.querySelectorAll(".links a");

function show() {
  if (arguments.length > 0) {
    NowImg = arguments[0];
    window.clearInterval(timer);
  }
  for (var i = 1; i <= MaxImg; i++) {
    if (i == NowImg) {
      imgs[i - 1].style.display = "block";
      links[i - 1].className = "a2";
    } else {
      imgs[i - 1].style.display = "none";
      links[i - 1].className = "a1";
    }
  }
  if (NowImg == MaxImg) NowImg = 1;
  else NowImg++;
}

timer = setInterval(show, 1500);

function star() {
  timer = setInterval(show, 1500);
}

• NowImg表示当前要显示的图片序号，初始值为2，对应第二张图片。
• MaxImg表示图片总数，这里为4。
• imgs和links分别获取所有图片和链接元素。
• show()函数用于控制图片的显示与隐藏，根据传入的参数决定显示哪张图片，同时更新对应的链接样式。
• setInterval()方法用于定时切换图片，每隔1500毫秒（1.5秒）调用一次show()函数。
• star()函数用于重新启动定时器，实现鼠标移出链接后继续轮播的效果。

🎯核心代码

<div class="wrapper">
    <div class="container">
      <img src="images/01.jpg" id="img1" />
      <img src="images/02.jpg" id="img2" style="display:none;" />
      <img src="images/03.jpg" id="img3" style="display:none;" />
      <img src="images/04.jpg" id="img4" style="display:none;" />
    </div>
    <div class="links">
      <a href="javascript:;" class="a2" id="btn1" onmouseover="show(1)" onmouseout="star()">1</a>
      <a href="javascript:;" class="a1" id="btn2" onmouseover="show(2)" onmouseout="star()">2</a>
      <a href="javascript:;" class="a1" id="btn3" onmouseover="show(3)" onmouseout="star()">3</a>
      <a href="javascript:;" class="a1" id="btn4" onmouseover="show(4)" onmouseout="star()">4</a>
    </div>
  </div>

🎯效果展示