jquery 横幅按钮

来源于数码通 2023-10-06 15:22 评测

jQuery 是一个广泛用于 Web 开发的 JavaScript 库。流行的应用程序之一是轮播（横幅）功能。轮播图片通常需要配备一些按钮来控制轮播。以下是使用 jQuery 创建轮播按钮的示例代码。























。横幅 {
位置：相对；
宽度：800px；
高度：400像素；
边距：20px 自动；
}
.横幅img {
位置：绝对；
左：0；
顶部：0；
不透明度：0；
过渡：不透明度0.5s；
}
.banner img.current {
不透明度：1；
}
.横幅.按钮{
位置：绝对；
底部：10 像素；
左：50%；
变换：translateX(-50%)；
z 指数：99；
}
.banner .buttons 跨度 {
显示：内联块；
宽度：10px；
高度：10px；
右边距：5px；
边界半径：50%；
背景：#ccc；
光标：指针；
}
.banner .buttons span.current {
背景：#f00；
}

$(函数() {
变量索引 = 0；
var length = $('.banner img').length;
var 计时器 = null;
//默认设置
显示图像（）；
//鼠标进出可暂停/启动轮播$('.banner').on('mouseenter', function() {
清除间隔（计时器）；
});
$('.banner').on('mouseleave', function() {
自动播放（）;
});
//点击按钮切换轮播图片
$('.banner .buttons span').on('click', function() {
索引 = $(this).index();
显示图像（）；
});
//自动轮播
函数自动播放（）{
计时器 = setInterval(函数() {
索引++；
如果（索引>=长度）{
索引=0；
}
显示图像（）；
}，2000）；
}
//显示当前轮播图片和按钮状态
函数 showImg() {
$('.banner img').eq(index).addClass('current').siblings().removeClass('current');
$('.banner .buttons span').eq(index).addClass('current').siblings().removeClass('current');
}
//启动自动轮播
自动播放（）;
});