<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="applicable-device" content="pc,mobile">
<title>Document</title>
<style>
/* 添加样式 */
.slider {
width: 100%; /* 设置轮播容器的宽度 */
position: relative;
overflow: hidden;
}
.slider img {
width: 100%;
overflow: hidden;
}
.slide-track {
display: flex;
transition: transform 0.5s ease;
}
.slide {
flex: 0 0 100%; /* 图片自适应容器宽度 */
}
.prev, .next {
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
opacity: .5;
border: 0;
}
.prev:hover, .next:hover {
opacity: 1;
}
.prev {
left: 10px;
width: 40px;
height: 40px;
background-image: url(icon/left.svg);
background-size:40px 40px;
background-repeat:no-repeat;
}
.next {
right: 10px;
width: 40px;
height: 40px;
background-image: url(icon/right.svg);
background-size:40px 40px;
background-repeat:no-repeat;
}
.indicators {
text-align: center;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
}
.indicator {
display: inline-block;
width: 12px;
height: 8px;
margin: 0 3px;
-webkit-transition: background .5s ease;
-moz-transition: background .5s ease;
-o-transition: background .5s ease;
transition: background .5s ease;
border-radius: 10px;
background: #EAEFFE;
cursor: pointer;
}
.indicator.active {
width: 24px;
height: 8px;
background: #364cc6;
}
.slider:hover .prev, .slider:hover .next {
display: block;
}
.slider__caption {
margin-top: -160px;
display: block;
padding: 20px 10px 40px;
text-align:center;
color: #fff;
background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.01) 5%, rgba(0, 0, 0, 0.6) 100%);
background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.01) 5%, rgba(0, 0, 0, 0.6) 100%);
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 5%, rgba(0, 0, 0, 0.6) 100%);
}
.slider__caption h3:hover {
background: rgba(255, 255, 255, 0.25);
}
</style>
</head>
<body style="transform: none;height: 2000px;">
<div class="slider">
<div class="slide-track">
<a href="#" class="slide active">
<img src="./images/1.jpg" alt="Image 1" />
<div class="slider__caption">
<h3>轮播图1</h3>
</div>
</a>
<a href="#" class="slide">
<img src="./images/2.jpg" alt="Image 2" />
<div class="slider__caption">
<h3>轮播图2</h3>
</div>
</a>
<a href="#" class="slide">
<img src="./images/2.jpg" alt="Image 2" />
<div class="slider__caption">
<h3>轮播图3</h3>
</div>
</a>
<!-- 更多图片 -->
</div>
<button class="prev"><</button>
<button class="next">></button>
<div class="indicators"></div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
const slideTrack = $('.slide-track');
const slides = $('.slide');
const prev = $('.prev');
const next = $('.next');
const indicators = $('.indicators');
let currentSlide = 0;
// 创建指示器
slides.each(function(index) {
indicators.append(`<div class="indicator"></div>`);
});
const indicatorItems = $('.indicator');
indicatorItems.eq(currentSlide).addClass('active');
// 切换到指定图片
function goToSlide(index) {
currentSlide = index;
updateSlide();
}
// 点击指示器切换图片
indicatorItems.click(function() {
const index = $(this).index();
goToSlide(index);
});
// 切换到前一张图片
prev.click(function() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
updateSlide();
});
// 切换到下一张图片
next.click(function() {
currentSlide = (currentSlide + 1) % slides.length;
updateSlide();
});
// 更新轮播显示
function updateSlide() {
slideTrack.css('transform', `translateX(-${currentSlide * 100}%)`);
slides.removeClass('active');
slides.eq(currentSlide).addClass('active');
indicatorItems.removeClass('active');
indicatorItems.eq(currentSlide).addClass('active');
}
// 自动播放功能
function startAutoPlay() {
autoPlayInterval = setInterval(function() {
currentSlide = (currentSlide + 1) % slides.length;
updateSlide();
}, 3000); // 自动播放间隔时间，单位：毫秒
}
function stopAutoPlay() {
clearInterval(autoPlayInterval);
}
startAutoPlay();
// 鼠标悬停时停止轮播
$('.slider').hover(function() {
stopAutoPlay();
}, function() {
startAutoPlay();
});
});
</script>
</html>