响应式全屏焦点图-freejs.net代码演示

首页>>Jquery文字>>响应式全屏焦点图(2024-02-28)

响应式全屏焦点图

响应式全屏，支持手动和自动滚动，文字可以自定义

XML/HTML Code

<div class="carousel">
<div class="carousel-item active"
style="background-image: url('../demo1.jpg'); background-size: 100% auto;">
<div class="carousel-text">Picture 1</div>
</div>
<div class="carousel-item" style="background-image: url('../freejs.jpg'); background-size: 100% auto;">
<div class="carousel-text">Picture 2</div>
</div>
<div class="carousel-item" style="background-image: url('../demo2.jpg'); background-size: 100% auto;">
<div class="carousel-text">Picture 3</div>
</div>
<div class="carousel-item" style="background-image: url('../freejs.jpg'); background-size: 100% auto;">
<div class="carousel-text">Picture 4</div>
</div>
<div class="carousel-nav">
<button class="active"></button>
<button></button>
<button></button>
<button></button>
</div>
</div>

JavaScript Code

$(document).ready(function() {
// 获取轮播项和指示点
var items = $('.carousel-item');
var points = $('.carousel-nav button');
// 定义轮播函数
function carousel() {
// 获取当前轮播项
var activeItem = $('.carousel-item.active');
// 获取下一轮播项
var nextItem = activeItem.next();
// 如果下一轮播项不存在，则从头开始轮播
if (!nextItem.length) {
nextItem = items.first();
}
// 切换轮播项和指示点样式
activeItem.removeClass('active');
nextItem.addClass('active');
points.eq(nextItem.index()).addClass('active').siblings().removeClass('active');
}
// 定义定时器，每隔5秒切换一次轮播项
var timer = setInterval(carousel, 2000);
// 当鼠标悬停在轮播容器上时，清除定时器
$('.carousel').hover(function() {
clearInterval(timer);
}, function() {
timer = setInterval(carousel, 3000);
});
// 当点击指示点时，跳转至相应的轮播项
points.click(function() {
var index = $(this).index();
var activeItem = $('.carousel-item.active');
var nextItem = items.eq(index);
// 如果当前轮播项和下一个轮播项相同，则不执行任何操作
if (activeItem.index() == nextItem.index()) {
return;
}
// 切换轮播项和指示点样式
activeItem.removeClass('active');
nextItem.addClass('active');
points.eq(nextItem.index()).addClass('active').siblings().removeClass('active');
});
});