|
|
以下是一个简单的图片轮播的HTML代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Slider</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f1
f1f1;
}
#slider {
overflow: hidden;
display: flex;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
#slider img:not(:first-child) {
display: none;
}
</style>
</head>
<body>
这段代码使用了简单的CSS样式来创建一个基本的图片轮播效果，并且使用JavaScript来控制图片的显示和隐藏，实现自动轮播。你只需要将image1.jpg, image2.jpg, image3.jpg等替换成你的实际图片路径即可。
<div id="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<script>
const images = document.querySelectorAll('#slider img');
let index = 0;
function nextImage() {
images[index].style.display = 'none';
index = (index + 1) % images.length;
images[index].style.display = 'inline';
}
setInterval(nextImage, 3000);
</script>
</body>
</html>
|
开门芝麻网
部分内容由网友发布或收集于互联网，如有侵权，请联系QQ/微信76815288，第一时间删除！(开门芝麻网 sns.d1v1.com)
|
|申请友链|Archiver|手机版|小黑屋|D1V1网社区 @开门芝麻网
( 沪ICP备15050032号-2 )
发表于 2012-5-6 17:01:21