帮我用H5写个滚动图片
时间: 2023-01-11 15:55:36 浏览: 76
好的,这是一个使用 HTML5 制作滚动图片的简单示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置图片的显示样式 */
.slides {
display: none;
}
/* 设置左右按钮的样式 */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* 设置右按钮的样式 */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* 设置按钮悬浮时的样式 */
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* 设置图片底部的圆点按钮的样式 */
.dot-container {
text-align: center;
margin-top: 20px;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* 设置圆点按钮悬浮时的样式 */
.dot:hover {
background-color: #717171;
}
/* 设置选中圆点按钮的样式 */
.active {
background-color: #717171;
}
</style>
</head>
<body>
<!-- 图片滚动容器 -->
<div class="slideshow-container">
<!-- 图片1 -->
<div class="mySlides">
<img src="image1.jpg" style="width:100%">
</div>
<!-- 图片2 -->
<div class="mySlides">
<img src="image2.jpg" style="width:100%">
</div>
<!-- 图片3 -->
<div class="mySlides">
<img src="image3.jpg" style="width:100%">
</div>
<!--