html 图片轮播 图片添加链接代码鼠标划上去,停止轮播鼠标划出,继续轮播 图片5秒换一张
时间: 2023-12-19 16:06:14 浏览: 34
以下是一个简单的HTML图片轮播,其中每张图片都有一个链接。当鼠标悬停在图片上时,轮播将停止,并且当鼠标离开时,轮播将继续。
```html
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<style type="text/css">
#slideshow {
position: relative;
height: 400px;
width: 600px;
margin: auto;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
max-height: 100%;
display: none;
}
#slideshow img.active {
display: block;
}
#slideshow a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 5px;
background-color: #fff;
color: #000;
text-decoration: none;
font-size: 14px;
}
</style>
</head>
<body>
<div id="slideshow">
<a href="#">停止轮播</a>
<img class="active" src="image1.jpg" alt="Image 1" />
<img src="image2.jpg" alt="Image 2" />
<img src="image3.jpg" alt="Image 3" />
</div>
<script type="text/javascript">
var slideshow = document.getElementById('slideshow');
var images = slideshow.getElementsByTagName('img');
var link = slideshow.getElementsByTagName('a')[0];
var current = 0;
var interval = setInterval(nextImage, 5000);
function nextImage() {
images[current].className = '';
current = (current + 1) % images.length;
images[current].className = 'active';
}
link.onclick = function(e) {
e.preventDefault();
if (interval) {
clearInterval(interval);
interval = null;
link.innerHTML = '继续轮播';
} else {
interval = setInterval(nextImage, 5000);
link.innerHTML = '停止轮播';
}
};
slideshow.onmouseover = function() {
clearInterval(interval);
interval = null;
};
slideshow.onmouseout = function() {
if (!interval) {
interval = setInterval(nextImage, 5000);
}
};
</script>
</body>
</html>
```
在这个示例中,轮播的图像位于一个具有相对位置的div中。每个图像都被绝对定位,并且只有一个“active”类。用JavaScript设置一个间隔,每5秒钟就会切换到下一张图片,同时将当前图像的“active”类删除并将其添加到下一个图像上。当用户单击“停止轮播”链接时,间隔将被清除,并在链接上显示“继续轮播”。当鼠标悬停在轮播上时,间隔将被清除,当鼠标离开时,间隔将被恢复。