南京城墙网
南京城墙网是一个提供关于南京城墙的相关信息和图片的网站。通过使用HTML、CSS和JavaScript,该网站可以实现轮播图效果，展示不同角度的南京城墙风景照。
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南京城墙网</title>
<style>
/* CSS样式 */
</style>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
CSS样式
html, body {
overflow: hidden;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#back1, #back0 {
transition: all 0.5s ease-in 0.2s;
}
JavaScript代码
var delay = 10 * 300; // 根据实际情况调整轮播间隔时间(毫秒)
var max = 4; // 可切换的图片数量
var i = 0; // 当前列图片的索引值
var current = 0; // 当前显示的图片索引值
var images = arr_random(max); // 从0到max-1之间随机生成4个数组成的数组，作为图片的索引值数组
var clientWidth = document.documentElement.clientWidth; // 获取浏览器窗口宽度
var clientHeight = document.documentElement.clientHeight; // 获取浏览器窗口高度
var width = height = 0; // img元素的初始宽度和高度为0
window.onload = function() { // 在页面加载完成后执行以下操作
width = document.getElementById('img0').width; // 将img元素的宽度赋值给变量width,用于后续设置轮播图容器的宽度为img元素的宽度加一个像素(为了防止图片边缘留白)
height = document.getElementById('img0').height; // 将img元素的高度赋值给变量height,用于后续设置轮播图容器的高度为img元素的高度加一个像素(为了防止图片边缘留白)
};
var src = './images/index/' + (images[i] + 1); // 根据当前图片索引值设置img元素的src属性，用于显示对应图片
