带左右箭头渐变切换显示的jQuery焦点图插件代码

原创已于 2025-06-27 15:40:50 修改 · 897 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-24 14:43:15 首次发布

<!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;
}

.slider-container {
position: relative;
width: 800px;
height: 400px;
margin: 50px auto;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.slider {
width: 100%;
height: 100%;
position: relative;
}

.slider-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}

.slider-item.active {
opacity: 1;
}

.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
}

.slider-nav {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
z-index: 10;
}

.slider-nav-item {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
cursor: pointer;
transition: background-color 0.3s;
}

.slider-nav-item.active {
background-color: #fff;
}

.slider-arrow {
position: absolute;
top: 50%;
width: 40px;
height: 60px;
margin-top: -30px;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
line-height: 60px;
font-size: 24px;
cursor: pointer;
z-index: 10;
opacity: 0;
transition: opacity 0.3s;
}

.slider-container:hover .slider-arrow {
opacity: 1;
}

.slider-arrow-left {
left: 0;
border-radius: 0 5px 5px 0;
}

.slider-arrow-right {
right: 0;
border-radius: 5px 0 0 5px;
}

.slider-arrow:hover {
background-color: rgba(0,0,0,0.8);
}

/* 网站链接样式 */
.website-link {
display: block;
text-align: center;
margin: 20px auto;
color: #333;
text-decoration: none;
font-size: 14px;
}

.website-link:hover {
color: #0066cc;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider">
<div class="slider-item active">
<img src="https://picsum.photos/800/400?random=1" alt="Slide 1">
</div>
<div class="slider-item">
<img src="https://picsum.photos/800/400?random=2" alt="Slide 2">
</div>
<div class="slider-item">
<img src="https://picsum.photos/800/400?random=3" alt="Slide 3">
</div>
<div class="slider-item">
<img src="https://picsum.photos/800/400?random=4" alt="Slide 4">
</div>
</div>

<div class="slider-nav">
<span class="slider-nav-item active"></span>
<span class="slider-nav-item"></span>
<span class="slider-nav-item"></span>
<span class="slider-nav-item"></span>
</div>

<div class="slider-arrow slider-arrow-left"><</div>
<div class="slider-arrow slider-arrow-right">></div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 焦点图插件
function Slider(container) {
this.container = $(container);
this.slider = this.container.find('.slider');
this.items = this.container.find('.slider-item');
this.navItems = this.container.find('.slider-nav-item');
this.arrowLeft = this.container.find('.slider-arrow-left');
this.arrowRight = this.container.find('.slider-arrow-right');
this.currentIndex = 0;
this.totalItems = this.items.length;
this.autoPlayInterval = null;
this.autoPlayDelay = 3000;

this.init();
}

Slider.prototype = {
init: function() {
this.bindEvents();
this.startAutoPlay();
},

bindEvents: function() {
var self = this;

// 导航点点击事件
this.navItems.on('click', function() {
var index = $(this).index();
self.goToSlide(index);
});

// 左箭头点击事件
this.arrowLeft.on('click', function() {
self.prevSlide();
});

// 右箭头点击事件
this.arrowRight.on('click', function() {
self.nextSlide();
});

// 鼠标悬停暂停自动播放
this.container.on('mouseenter', function() {
self.stopAutoPlay();
});

// 鼠标离开恢复自动播放
this.container.on('mouseleave', function() {
self.startAutoPlay();
});
},

goToSlide: function(index) {
// 更新当前索引
this.currentIndex = index;

// 更新幻灯片显示
this.items.removeClass('active');
this.items.eq(index).addClass('active');

// 更新导航点状态
this.navItems.removeClass('active');
this.navItems.eq(index).addClass('active');
},

nextSlide: function() {
var nextIndex = (this.currentIndex + 1) % this.totalItems;
this.goToSlide(nextIndex);
},

prevSlide: function() {
var prevIndex = (this.currentIndex - 1 + this.totalItems) % this.totalItems;
this.goToSlide(prevIndex);
},

startAutoPlay: function() {
var self = this;
this.stopAutoPlay();
this.autoPlayInterval = setInterval(function() {
self.nextSlide();
}, this.autoPlayDelay);
},

stopAutoPlay: function() {
if (this.autoPlayInterval) {
clearInterval(this.autoPlayInterval);
this.autoPlayInterval = null;
}
}
};

// 初始化焦点图
new Slider('.slider-container');
});
</script>
</body>
</html>