Minecraft 下载 - 最新版本和历史版本 - 常规

<!DOCTYPE html>
<html>
<head>
  <title>Minecraft 下载页面</title>
  <style>
    /* 样式可以根据需要进行自定义 */
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #4CAF50;
      font-size: 32px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s;
      margin-top: 10px;
    }
    .button:hover {
      background-color: #45a049;
    }
    .dropdown-content {
      display: none;
      margin-top: 10px;
    }
    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: black;
      font-size: 16px;
    }
    .slider {
      width: 100%;
      overflow: hidden;
      position: relative;
      margin-top: 20px;
    }
    .slider .slides {
      display: flex;
      transition: transform 0.3s ease-in-out;
    }
    .slider .slides img {
      width: 100%;
    }
    .slider .prev,
    .slider .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 10px;
      text-decoration: none;
      z-index: 1;
    }
    .slider .prev {
      left: 10px;
    }
    .slider .next {
      right: 10px;
    }
  </style>
  <script>
    // JavaScript部分用于实现下拉菜单的显示与隐藏
    function toggleDropdown() {
      var dropdown = document.getElementById("dropdown");
      if (dropdown.style.display === "none" || dropdown.style.display === "") {
        dropdown.style.display = "block";
      } else {
        dropdown.style.display = "none";
      }
    }
  </script>
  <script>
    var slideIndex = 0;
    var timer;
<pre><code>function showSlide(n) {
  var slides = document.getElementsByClassName(&quot;slides&quot;)[0];
  slides.style.transform = `translateX(-${n * 100}%)`;
}

function nextSlide() {
  slideIndex++;
  var slides = document.getElementsByClassName(&quot;slides&quot;)[0].getElementsByTagName(&quot;img&quot;);
  if (slideIndex &gt;= slides.length) {
    slideIndex = 0;
  }
  showSlide(slideIndex);
}

function prevSlide() {
  slideIndex--;
  var slides = document.getElementsByClassName(&quot;slides&quot;)[0].getElementsByTagName(&quot;img&quot;);
  if (slideIndex &lt; 0) {
    slideIndex = slides.length - 1;
  }
  showSlide(slideIndex);
}

function startTimer() {
  timer = setInterval(nextSlide, 2000);
}

function resetTimer() {
  clearInterval(timer);
  startTimer();
}

document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
  showSlide(slideIndex);
  startTimer();
});

document.addEventListener(&quot;keydown&quot;, function() {
  resetTimer();
});

document.addEventListener(&quot;click&quot;, function() {
  resetTimer();
});
</code></pre>
  </script>
</head>
<body>
  <div class="container">
    <h1>Minecraft 下载</h1>
<pre><code>&lt;p&gt;Minecraft&lt;/p&gt;
&lt;p&gt;&lt;a&gt;版本: 1.17.1&lt;/a&gt;&lt;a&gt;大小: 100 MB&lt;/a&gt;&lt;/p&gt;

&lt;a class=&quot;button&quot; href=&quot;latest_version_download_link&quot;&gt;下载&lt;/a&gt;

&lt;h2&gt;历史版本下载&lt;/h2&gt;
&lt;button class=&quot;button&quot; onclick=&quot;toggleDropdown()&quot;&gt;选择版本&lt;/button&gt;
&lt;div id=&quot;dropdown&quot; class=&quot;dropdown-content&quot;&gt;
  &lt;a href=&quot;version1_download_link&quot;&gt;1.16.5&lt;/a&gt;
  &lt;a href=&quot;version2_download_link&quot;&gt;1.15.2&lt;/a&gt;
  &lt;a href=&quot;version3_download_link&quot;&gt;1.14.4&lt;/a&gt;
  &lt;!-- 添加更多历史版本的下载链接 --&gt;
&lt;/div&gt;

&lt;h2&gt;内容介绍&lt;/h2&gt;
&lt;p&gt;这里可以写Minecraft的内容介绍。&lt;/p&gt;

&lt;h2&gt;滑动浏览&lt;/h2&gt;
&lt;div class=&quot;slider&quot;&gt;
  &lt;a class=&quot;prev&quot; onclick=&quot;prevSlide()&quot;&gt;&amp;#10094;&lt;/a&gt;
  &lt;div class=&quot;slides&quot;&gt;
    &lt;img src=&quot;img/1.png&quot; alt=&quot;Image 1&quot;&gt;
    &lt;img src=&quot;img/2.png&quot; alt=&quot;Image 2&quot;&gt;
    &lt;img src=&quot;img/3.png&quot; alt=&quot;Image 3&quot;&gt;
    &lt;img src=&quot;img/4.png&quot; alt=&quot;Image 4&quot;&gt;
    &lt;img src=&quot;img/5.png&quot; alt=&quot;Image 5&quot;&gt;
  &lt;/div&gt;
  &lt;a class=&quot;next&quot; onclick=&quot;nextSlide()&quot;&gt;&amp;#10095;&lt;/a&gt;
&lt;/div&gt;
</code></pre>
  </div>
</body>
</html>