在本文中，我们将使用JavaScript和CSS3制作一个简单但功能强大的网页应用程序，可用于显示电影图片封面、星级评分和切换效果。此应用程序可以通过单击箭头按钮来滑动并切换到下一张图片，并放大显示每个电影的详细介绍。

准备工作

在开始编写代码之前，让我们先准备一些必要的资源。这些资源包括：

  • 电影图片：我们需要收集足够数量的电影海报图片，并将它们保存在适当的文件夹中。
  • CSS样式表：使用CSS3创建漂亮的界面元素，如背景色、边框、字体和布局。
  • JavaScript脚本：使用JavaScript创建滑动和切换效果，并将每个电影的详细介绍放大到屏幕上。

HTML结构

我们将创建一个HTML文件，并在其中定义所有必要的元素和ID。以下是我们需要的HTML元素：

<div id="container">
  <div id="slider">
    <img src="path/to/movie-poster-1.jpg" alt="Movie Poster 1" />
    <img src="path/to/movie-poster-2.jpg" alt="Movie Poster 2" />
    <img src="path/to/movie-poster-3.jpg" alt="Movie Poster 3" />
    <img src="path/to/movie-poster-4.jpg" alt="Movie Poster 4" />
  </div>
  <div id="info">
    <h1>Movie Title</h1>
    <p>Movie Description</p>
    <ul id="stars">
      <li class="star"></li>
      <li class="star"></li>
      <li class="star"></li>
      <li class="star"></li>
      <li class="star"></li>
    </ul>
  </div>
  <a href="#" id="prev">&lt;</a>
  <a href="#" id="next">&gt;</a>
</div>
  • #container：包含所有元素的主容器。
  • #slider：包含电影海报图片的滑动容器。
  • #info：包含每部电影的标题、描述和星级评分。
  • #stars：显示星级评分的无序列表。
  • .star：表示单个星级的列表项。
  • #prev：用于向左滑动到上一个电影海报。
  • #next：用于向右滑动到下一个电影海报。

CSS样式

使用CSS3可以为我们的应用程序添加样式。以下是样式表的基本布局：

body {
  background-color: #333;
  color: #fff;
  font-family: Arial, sans-serif;
}

#container {
  width: 800px;
  margin: 0 auto;
  position: relative;
}

#slider {
  width: 100%;
  overflow: hidden;
}

#slider img {
  display: inline-block;
  width: 100%;
  height: auto;
}

#info {
  width: 50%;
  margin-top: 20px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(51, 51, 51, 0.7);
  padding: 20px;
  box-sizing: border-box;
  transition: width 0.5s ease-in-out;
}

#info h1 {
  margin-top: 0;
  font-weight: bold;
  font-size: 24px;
}

#stars {
  display: inline-block;
  margin: 10px 0;
  padding: 0;
  list-style-type: none;
}

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(star.png);
  background-position: 0 0;
  cursor: pointer;
}

.star.selected {
  background-position: 0 -20px;
}

#prev,
#next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(51, 51, 51, 0.7);
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  cursor: pointer;
}

#prev:hover,
#next:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
}

我们设置了背景颜色、文字颜色和字体样式。我们定义了`#container`和`#slider`的基本样式，用于对容器进行布局和滑动效果。

我们使用CSS3设置了图片的自适应大小，并为电影信息添加了一个半透明的黑色背景。我们还定义了标题、星级评分和箭头按钮的样式，并为选中的星级添加了不同的背景图案。

JavaScript脚本

我们将通过JavaScript为应用程序添加交互性。以下是我们需要的JavaScript代码：

var slider = document.getElementById("slider");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var info = document.getElementById("info");
var stars = document.querySelectorAll(".star");

var slideIndex = 0;

function showSlide(n) {
  var slides = slider.getElementsByTagName("img");
  if (n >= slides.length) {
    slideIndex = 0;
  } else if (n < 0) {
    slideIndex = slides.length - 1;
  } else {
    slideIndex = n;
  }
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex].style.display = "block";
  info.style.width = "50%";
}

function showInfo() {
  info.style.width = "100%";
}

prev.addEventListener("click", function() {
  showSlide(slideIndex - 1);
});

next.addEventListener("click", function() {
  showSlide(slideIndex + 1);
});

for (var i = 0; i < stars.length; i++) {
  stars[i].addEventListener("click", function() {
    this.classList.toggle("selected");
  });
}

showSlide(slideIndex);

我们获取了所有必要的元素，并创建了一个名为slideIndex的全局变量，用于跟踪当前显示的图片。

我们还定义了两个函数：showSlide()和showInfo()。showSlide()用于在滑动容器中显示指定索引的图片，并将其余图片隐藏起来。它还更新了slideIndex变量，以便正确跟踪下一张或上一张图像。showInfo()用于在信息容器中显示电影的详细介绍。

我们将事件监听器添加到箭头按钮和星级评分上。当单击箭头按钮时，它们将调用showSlide()函数并更新当前显示的图片。当单击星级评分时，它们将添加或删除selected类，从而更改选中星级的外观。

我们调用showSlide()函数以在页面加载时显示第一张图片。

以上就是使用JavaScript和CSS3制作电影图片封面、星级评分和切换效果的完整教程。通过这个简单的应用程序，您可以学习如何使用JavaScript操作DOM元素并添加交互性，以及如何使用CSS3创建漂亮的界面元素。如果您对此感兴趣，请花时间进一步挖掘这个话题，并尝试更高级的技术和功能。