Minecraft 下载 - 最新版和历史版本,滑动浏览游戏截图
<div class='container'>
<h1>Minecraft 下载</h1>
<pre><code><h2>最新版本下载</h2>
<p>软件名称: Minecraft</p>
<p>大小: 100 MB</p>
<p>版本号: 1.17.1</p>
<a class='button' href='latest_version_download_link'>下载</a>
<h2>历史版本下载</h2>
<button class='button' onclick='toggleDropdown()'>选择版本</button>
<div id='dropdown' class='dropdown-content'>
<a href='version1_download_link'>1.16.5</a>
<a href='version2_download_link'>1.15.2</a>
<a href='version3_download_link'>1.14.4</a>
<!-- 添加更多历史版本的下载链接 -->
</div>
<h2>内容介绍</h2>
<p>这里可以写Minecraft 的内容介绍。</p>
<h2>滑动浏览</h2>
<div class='slider'>
<a class='prev' onclick='prevSlide()'>&#10094;</a>
<div class='slides'>
<img src='img/1.png' alt='Image 1'>
<img src='img/2.png' alt='Image 2'>
<img src='img/3.png' alt='Image 3'>
<img src='img/4.png' alt='Image 4'>
<img src='img/5.png' alt='Image 5'>
</div>
<a class='next' onclick='nextSlide()'>&#10095;</a>
</div>
</code></pre>
</div>
<style>
/* 样式可以根据需要进行自定义 */
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
}
.button:hover {
background-color: #45a049;
}
.dropdown-content {
display: none;
}
.dropdown-content a {
display: block;
padding: 10px;
text-decoration: none;
color: black;
}
.slider {
width: 100%;
overflow: hidden;
position: relative;
}
.slider .slides {
display: inline-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;
<p>function showSlide(n) {
var slides = document.getElementsByClassName('slides')[0].getElementsByTagName('img');
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slides[n].style.display = 'block';
}</p>
<p>function nextSlide() {
slideIndex++;
var slides = document.getElementsByClassName('slides')[0].getElementsByTagName('img');
if (slideIndex >= slides.length) {
slideIndex = 0;
}
showSlide(slideIndex);
}</p>
<p>function prevSlide() {
slideIndex--;
var slides = document.getElementsByClassName('slides')[0].getElementsByTagName('img');
if (slideIndex < 0) {
slideIndex = slides.length - 1;
}
showSlide(slideIndex);
}</p>
<p>function startTimer() {
timer = setInterval(nextSlide, 2000);
}</p>
<p>function resetTimer() {
clearInterval(timer);
startTimer();
}</p>
<p>document.addEventListener('DOMContentLoaded', function() {
showSlide(slideIndex);
startTimer();
});</p>
<p>document.addEventListener('keydown', function() {
resetTimer();
});</p>
<p>document.addEventListener('click', function() {
resetTimer();
});
</script></p>
原文地址: https://www.cveoy.top/t/topic/qcoW 著作权归作者所有。请勿转载和采集!