两张小米手机的轮播图
时间: 2024-04-16 12:20:40 浏览: 110
小米官网轮播图.zip
以下是使用JavaScript和jQuery编写的两张小米手机的轮播图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>小米手机轮播图</title>
<style>
.carousel {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
.carousel .prev, .carousel .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
cursor: pointer;
}
.carousel .prev {
left: 10px;
}
.carousel .next {
right: 10px;
}
</style>
</head>
<body>
<div class="carousel">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var images = $('.carousel img');
var currentIndex = 0;
function showImage(index) {
images.removeClass('active');
images.eq(index).addClass('active');
}
function nextImage() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
showImage(currentIndex);
}
function prevImage() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
showImage(currentIndex);
}
$('.carousel .next').click(nextImage);
$('.carousel .prev').click(prevImage);
});
</script>
</body>
</html>
```
这段代码创建了一个宽度为500px,高度为300px的轮播图容器,其中包含两张图片。通过点击"上一张"和"下一张"按钮,可以切换显示的图片。图片切换时使用了过渡效果,使切换更加平滑。
阅读全文