案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用JavaScript编程实战案例，做一个推荐滑块。推荐滑块展示内容，每隔3秒自动变换。

案例演示

运行程序后，出现推荐卡片，卡片上方有圆形头像，下方卡片进行介绍，每隔3秒自动变换。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<!-- 有个小院-兴趣编程 -->
<div class="testimonial-container">
  <img src="logo.png" alt="user-image"/>
  <p class="text">
    欢迎来到我的小院
  </p>
  <h4 class="username">有个小院</h4>
</div>

然后再让我们来看CSS代码，由于CSS代码不是重点且数量较多在这里就不做过多介绍。

body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  font-family: cursive;
}

.testimonial-container {
  width: 500px;
  height: 100px;
  background-color: slateblue;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  min-width: 400px;
  padding: 70px 20px;
  margin: 5px;
  color: white;
  position: relative;
  }

  img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -50px;
  }

  .username {
  font-size: 13px;
  font-weight: 100;
  }

让我们来编写核心的JavaScript代码，编写推荐卡片的内容，name是下方显示的名字，photoUrl是图片地址，text是下方显示介绍；通过querySelector绑定HTML元素；设置索引为0，更新推荐；编写更新图片函数，获取名字、图片地址、介绍，将根据获取到的信息设置HTML的相应元素，索引+1；如果到最末尾，索引归0返回到最开始，每隔3秒更新。

//有个小院-兴趣编程
const testimonials = [
  {
    name: "有个小院",
    photoUrl: "logo2.jpg",
    text: "欢迎来到我的小院",
  },
  {
    name: "小院里的霍大侠",
    photoUrl: "logo.png",
    text: "每天学习一点点，让你不再枯燥，不再孤单",
  }
];
const imgEl = document.querySelector("img");
const textEl = document.querySelector(".text");
const usernameEl = document.querySelector(".username");
let idx = 0;
updateTestimonial();
function updateTestimonial() {
  const { name, photoUrl, text } = testimonials[idx];
  imgEl.src = photoUrl;
  textEl.innerText = text;
  usernameEl.innerText = name;
  idx++;
  if (idx === testimonials.length) {
  idx = 0;
}
  setTimeout(() => {
  updateTestimonial();
}, 3000);
}

记得关注我，每天学习一点点

你觉得这个案例还有什么地方能改进？

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。