超简单jQuery轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147927810

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超简单jQuery轮播图</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.slider-container {
width: 800px;
height: 400px;
margin: 50px auto;
position: relative;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.slider {
width: 100%;
height: 100%;
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.control-btn {
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
border: none;
cursor: pointer;
}
.control-btn.active {
background-color: white;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(0,0,0,0.5);
color: white;
border: none;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
.credit {
text-align: center;
margin-top: -30px;
color: #666;
}
.credit a {
color: #0066cc;
text-decoration: none;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider">
<div class="slide">
<img src="https://picsum.photos/800/400?random=1" alt="Slide 1">
</div>
<div class="slide">
<img src="https://picsum.photos/800/400?random=2" alt="Slide 2">
</div>
<div class="slide">
<img src="https://picsum.photos/800/400?random=3" alt="Slide 3">
</div>
<div class="slide">
<img src="https://picsum.photos/800/400?random=4" alt="Slide 4">
</div>
</div>

<button class="prev">❮</button>
<button class="next">❯</button>

<div class="controls">
<button class="control-btn active"></button>
<button class="control-btn"></button>
<button class="control-btn"></button>
<button class="control-btn"></button>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const $slider = $('.slider');
const $slides = $('.slide');
const $controls = $('.control-btn');
const slideCount = $slides.length;
let currentIndex = 0;

// 自动轮播
let autoSlide = setInterval(nextSlide, 3000);

// 鼠标悬停时暂停轮播
$('.slider-container').hover(
function() {
clearInterval(autoSlide);
},
function() {
autoSlide = setInterval(nextSlide, 3000);
}
);

// 下一张
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
updateSlider();
}

// 上一张
function prevSlide() {
currentIndex = (currentIndex - 1 + slideCount) % slideCount;
updateSlider();
}

// 更新轮播图和指示器
function updateSlider() {
$slider.css('transform', `translateX(-${currentIndex * 100}%)`);
$controls.removeClass('active').eq(currentIndex).addClass('active');
}

// 点击指示器跳转到对应幻灯片
$controls.on('click', function() {
currentIndex = $(this).index();
updateSlider();
});

// 点击上一张/下一张按钮
$('.prev').on('click', prevSlide);
$('.next').on('click', nextSlide);
});
</script>
</body>
</html>