下面是一个简单的HTML示例,使用CSS和JavaScript实现了在手机浏览器中上下加载20张图片的功能。每张图片在手机浏览器中展示时,每屏展示一张图片,并且在上下滚动时,手指向上或向下滑动一次则滚动一次整页,同时有滚动切换的动效。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片滚动展示</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
transition: transform 0.5s ease;
}
.image {
flex: 0 0 100vh;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="container" id="container">
<!-- 图片将通过JavaScript动态加载 -->
</div>
<script>
const container = document.getElementById('container');
const images = [
'https://via.placeholder.com/800x600?text=Image+1',
'https://via.placeholder.com/800x600?text=Image+2',
'https://via.placeholder.com/800x600?text=Image+3',
'https://via.placeholder.com/800x600?text=Image+4',
'https://via.placeholder.com/800x600?text=Image+5',
'https://via.placeholder.com/800x600?text=Image+6',
'https://via.placeholder.com/800x600?text=Image+7',
'https://via.placeholder.com/800x600?text=Image+8',
'https://via.placeholder.com/800x600?text=Image+9',
'https://via.placeholder.com/800x600?text=Image+10',
'https://via.placeholder.com/800x600?text=Image+11',
'https://via.placeholder.com/800x600?text=Image+12',
'https://via.placeholder.com/800x600?text=Image+13',
'https://via.placeholder.com/800x600?text=Image+14',
'https://via.placeholder.com/800x600?text=Image+15',
'https://via.placeholder.com/800x600?text=Image+16',
'https://via.placeholder.com/800x600?text=Image+17',
'https://via.placeholder.com/800x600?text=Image+18',
'https://via.placeholder.com/800x600?text=Image+19',
'https://via.placeholder.com/800x600?text=Image+20',
];
let currentIndex = 0;
function loadImages() {
images.forEach((src, index) => {
const div = document.createElement('div');
div.className = 'image';
div.style.backgroundImage = `url(${src})`;
container.appendChild(div);
});
}
function scrollToIndex(index) {
const offset = -index * window.innerHeight;
container.style.transform = `translateY(${offset}px)`;
}
loadImages();
scrollToIndex(currentIndex);
let touchStartY = 0;
window.addEventListener('touchstart', (event) => {
touchStartY = event.touches[0].clientY;
});
window.addEventListener('touchmove', (event) => {
const touchEndY = event.touches[0].clientY;
const deltaY = touchStartY - touchEndY;
if (Math.abs(deltaY) > 50) {
if (deltaY > 0 && currentIndex < images.length - 1) {
currentIndex++;
scrollToIndex(currentIndex);
} else if (deltaY < 0 && currentIndex > 0) {
currentIndex--;
scrollToIndex(currentIndex);
}
touchStartY = touchEndY; // Reset touch start position
}
});
</script>
</body>
</html>
代码说明:
- HTML结构:包含一个
<div>
容器用于加载图片。
- CSS样式:
body
设置为无边距和隐藏溢出。
.container
设置为100vh的高度,并使用flex
布局。
.image
类用于每张图片的样式,确保每张图片占满整个视口。
- JavaScript逻辑:
- 定义了20张图片的URL。
loadImages
函数动态加载图片。
scrollToIndex
函数根据当前索引滚动到相应的图片。
- 通过
touchstart
和touchmove
事件监听手指滑动,判断滑动方向并更新当前索引。
使用方法:
将上述代码复制到一个HTML文件中,然后在手机浏览器中打开该文件,即可实现上下滚动查看图片的效果。