网页效果图
轮播图效果图
代码图
新兰主页代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新兰主页图</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Paste your CSS styles here */
.all {
width: 1000px;
height: 550px;
background-image: url('C:/Users/888888/Desktop/新兰/images/主页.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 10px 20px;
background-color: paleturquoise;
margin: 30px auto;
border-radius: 10px;
}
.title {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
padding: 10px;
margin-bottom: 30px;
background-color: rgba(0, 76, 130, 0.5);
color: white;
border-radius: 20px;
}
/* Continue with your other CSS styles */
</style>
</head>
<body>
<!-- Paste your body content here -->
<div class="all">
<div class="title">
<h3>点击图片可查看详情</h3>
</div>
<div class="content row" id="content"></div>
</div>
<script>
// Paste your JavaScript script here
// 初始变量
let boxCount = 0;
const maxBoxes = 4;
const content = document.getElementById('content');
const boxes = [
{ title: '樱花班', imgSrc: 'C:\\Users\\888888\\Desktop\\新兰\\images\\樱花班1.jpg' },
{ title: '帝丹高中', imgSrc: 'C:\\Users\\888888\\Desktop\\新兰\\images\\帝丹1.jpg' },
{ title: '大笨钟', imgSrc: 'C:\\Users\\888888\\Desktop\\新兰\\images\\大笨钟1.jpg' },
{ title: '清水寺', imgSrc: 'C:\\Users\\888888\\Desktop\\新兰\\images\\清水1.jpg' }
];
const links=['樱花.html','帝丹.html','大笨钟.html','清水.html']
function createBox(index) {
if (boxCount < maxBoxes) {
const box = document.createElement('div');
box.classList.add('lx', 'col-lg-4', 'col-sm-4', 'col-md-4', `y${index}`);
box.innerHTML = `
<div class="title1 y${index}">${boxes[index].title}</div>
<div class="content1 y${index}">
<a href="${links[index]}"><img src="${boxes[index].imgSrc}" alt=""></a>
</div>
`;
content.appendChild(box);
box.style.animation = 'boxAppear 2s forwards';
boxCount++;
} else {
clearInterval(interval);
}
}
const interval = setInterval(() => {
createBox(boxCount);
}, 500);
</script>
</body>
</html>
新兰轮播图代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>新兰轮播图</title>
<style>
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
border: pink 2px solid;
overflow: hidden;
margin: 50px auto;
border-radius: 10px;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}
.slider-footer {
height: 80px;
background-color: rgb(54, 98, 145);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./images/帝丹1.jpg" alt="" />
</div>
<div class="slider-footer">
<p>我早就发现她不只是青梅竹马了</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const data = [
{ url: './images/帝丹1.jpg', title: '我早就发现她不只是青梅竹马了', color: 'rgb(54, 98, 145)' },
{ url: './images/帝丹2.jpg', title: '我早就发现她不只是青梅竹马了', color: 'rgb(73, 83, 92)' },
{ url: './images/帝丹3.jpg', title: '我早就发现她不只是青梅竹马了', color: 'rgb(166, 131, 143)' },
{ url: './images/帝丹4.jpg', title: '我早就发现她不只是青梅竹马了', color: 'rgb(67, 148, 204)' },
]
// 获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
// 1. 右按钮业务
// 1.1 获取右侧按钮
const next = document.querySelector('.next')
let i = 0 // 信号量 控制播放图片张数
// 1.2 注册点击事件
next.addEventListener('click', function () {
// console.log(11)
i++
i = i >= data.length ? 0 : i
toggle()
})
// 2. 左侧按钮业务
// 2.1 获取左侧按钮
const prev = document.querySelector('.prev')
// 1.2 注册点击事件
prev.addEventListener('click', function () {
i--
i = i < 0 ? data.length - 1 : i
// 1.3 得到对应的对象
// console.log(data[i])
// 调用函数
toggle()
})
// 声明一个渲染的函数作为复用
function toggle() {
// 1.4 渲染对应的数据
img.src = data[i].url
p.innerHTML = data[i].title
footer.style.backgroundColor = data[i].color
// 1.5 更换小圆点 先移除原来的类名， 当前li再添加 这个 类名
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
// 3. 自动播放模块
let timerId = setInterval(function () {
// 利用js自动调用点击事件 click() 一定加小括号调用函数
next.click()
}, 1000)
// 4. 鼠标经过大盒子，停止定时器
const slider = document.querySelector('.slider')
// 注册事件
slider.addEventListener('mouseenter', function () {
// 停止定时器
clearInterval(timerId)
})
// 5. 鼠标离开大盒子，开启定时器
// 注册事件
slider.addEventListener('mouseleave', function () {
// 停止定时器
if (timerId) clearInterval(timerId)
// 开启定时器
timerId = setInterval(function () {
// 利用js自动调用点击事件 click() 一定加小括号调用函数
next.click()
}, 1000)
})
</script>
</body>
</html>技术栈选择
为了实现新兰动态图网站，我们选择使用 HTML、CSS 和 JavaScript 进行开发。
-
HTML 结构设计:
- 创建一个主页面
index.html，其中包含四个模块，每个模块代表一个动态图集，如樱花班、帝丹高中、大笨钟、清水寺。 - 每个模块包含一个图片链接，点击图片将跳转到该模块的轮播图详情页面。
- 创建一个主页面
-
CSS 样式设计:
- 使用 CSS 美化页面布局，确保页面在不同设备上有良好的显示效果。
- 设计按钮样式、背景颜色和模块布局，保证用户体验流畅和直观。
-
JavaScript 动态生成内容:
- 利用 JavaScript 动态生成每个模块的内容，包括图片和链接。
- 实现点击图片时的页面跳转功能，通过事件监听器实现这一功能。
-
轮播图详情页面:
- 每个模块的轮播图详情页面使用 JavaScript 实现轮播功能，展示多张相关图片。
- 考虑添加过渡效果和控制按钮，以提升用户体验。
优化建议
-
性能优化:
- 使用图片懒加载技术，以加快页面加载速度。
- 压缩和合并 CSS 和 JavaScript 文件，减少请求次数和文件大小。
-
响应式设计:
- 确保网站在不同大小的屏幕上均能良好显示，使用媒体查询优化布局。
-
用户体验:
- 添加合适的过渡效果和动画，增强页面的交互性和吸引力。
- 考虑无障碍设计，使得网站对残障人士更加友好。
-
SEO 优化:
- 使用语义化的 HTML 标签结构，合理设置页面标题、描述和关键词。
- 确保页面链接的友好性，提升搜索引擎排名。
新兰动态图的优点
-
动态生成内容:
- 使用 JavaScript 动态生成内容，使得网站内容易于更新和维护。
-
交互性强:
- 点击图片即可跳转到详细信息页面，提供了直观的用户导航方式。
-
视觉吸引力:
- 使用 CSS 美化页面布局和样式，增强了页面的视觉吸引力。
-
用户导航友好:
- 简洁明了的设计和导航结构，使用户可以轻松找到所需信息。
-
技术现代化:
- 使用现代的前端开发技术（HTML5、CSS3、ES6+），保证了网站的性能和可扩展性。