html5图片自动切换代码,html5全屏图片左右切换点击弹出图片详情代码
时间: 2023-07-09 15:03:20 浏览: 49
下面是一个基于 HTML5 和 JavaScript 的自动切换和全屏图片左右切换点击弹出图片详情的代码示例:
HTML 代码:
```html
<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>
```
CSS 代码:
```css
#slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
#slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slider img.active {
opacity: 1;
}
#slider .controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
#slider .controls button {
display: inline-block;
margin: 0 10px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#slider .controls button:hover {
background-color: #666;
}
```
JavaScript 代码:
```javascript
var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");
var current = 0;
setInterval(function() {
images[current].className = "";
current = (current + 1) % images.length;
images[current].className = "active";
}, 5000);
var prevButton = document.createElement("button");
prevButton.innerHTML = "Prev";
prevButton.addEventListener("click", function() {
images[current].className = "";
current = (current - 1 + images.length) % images.length;
images[current].className = "active";
});
var nextButton = document.createElement("button");
nextButton.innerHTML = "Next";
nextButton.addEventListener("click", function() {
images[current].className = "";
current = (current + 1) % images.length;
images[current].className = "active";
});
var closeButton = document.createElement("button");
closeButton.innerHTML = "Close";
closeButton.style.display = "none";
closeButton.addEventListener("click", function() {
document.body.removeChild(modal);
});
var modal = document.createElement("div");
modal.style.position = "fixed";
modal.style.top = "0";
modal.style.left = "0";
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
modal.style.display = "none";
modal.addEventListener("click", function() {
modal.removeChild(image);
modal.removeChild(closeButton);
modal.style.display = "none";
});
var image = document.createElement("img");
image.style.position = "absolute";
image.style.top = "50%";
image.style.left = "50%";
image.style.transform = "translate(-50%, -50%)";
image.style.maxWidth = "90%";
image.style.maxHeight = "90%";
image.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("click", function() {
image.src = this.src;
modal.appendChild(image);
modal.appendChild(closeButton);
modal.style.display = "block";
});
}
var controls = document.createElement("div");
controls.className = "controls";
controls.appendChild(prevButton);
controls.appendChild(nextButton);
document.body.appendChild(slider);
document.body.appendChild(controls);
document.body.appendChild(modal);
```
这段代码会创建一个带有自动切换和全屏图片左右切换点击弹出图片详情功能的图片轮播器。你只需要将 HTML 代码中的图片路径替换为你自己的图片路径即可。