用html+css+javascript实现5.④视频播放控制功能;⑤图片动态(动画或切换或轮播等)功能。
时间: 2024-05-12 16:19:27 浏览: 252
pyqt5 实现视频播放,包含常用的进度控制、声音控制、全屏播放、截图等功能
5星 · 资源好评率100%
5.视频播放控制功能
HTML代码:
```
<video id="myVideo" width="640" height="360" controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">默认大小</button>
<script>
var myVideo = document.getElementById("myVideo");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 960;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 640;
}
</script>
```
CSS代码:
```
video {
border: 1px solid #ccc;
box-shadow: 0px 0px 5px #999;
}
```
JavaScript代码使用了video元素自带的控制条,同时添加了四个按钮实现播放、暂停、放大、缩小等操作。
6.图片动态功能
HTML代码:
```
<div class="slideshow-container">
<div class="mySlides fade">
<img src="slide1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="slide2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="slide3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 3000); // 每3秒切换一张图片
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
</script>
```
CSS代码:
```
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
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);
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
```
JavaScript代码实现了轮播图的功能,每隔3秒自动切换一张图片。点击左右箭头可以切换上一张或下一张。CSS代码实现了轮播图的样式。
阅读全文