效果展示:
为了让效果更好看我就随便加了一点点东西。以下便是代码
/* 1. 轮播图样式 */
.banners {
width: 100%;
height: 400px; /* 调整轮播图高度 */
position: relative;
overflow: hidden; /* 隐藏超出部分 */
background: #f0f0f0; /* 背景色 */
}
.banners img {
width: 100%;
height: 100%;
position: absolute;
left: 100%; /* 初始位置在右侧 */
top: 0;
object-fit: cover; /* 图片填充容器 */
}
.banners img:nth-of-type(1) {
left: 0; /* 第一张图片显示在容器内 */
}
/* 2. 登录框样式 */
#overlay {
display: none; /* 默认隐藏遮罩层 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* 半透明黑色背景 */
}
#loginBox {
position: absolute;
width: 300px;
padding: 20px;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 阴影效果 */
bottom: 20px; /* 登录框放在页面底部 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
}
.drag-header {
padding: 10px;
cursor: move; /* 鼠标悬停时显示可拖动图标 */
background: #f0f0f0;
border-radius: 5px 5px 0 0;
}
/* 3. 页面布局 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#showLoginBtn {
position: fixed;
bottom: 20px; /* 按钮放在页面底部 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
$(document).ready(function() {
// ===== 1. 轮播图功能 =====
let showIndex = 0;
const images = $('.banners img');
function toggleImage() {
// 当前图片向左移出
$(images[showIndex]).animate({ left: '-100%' }, 500);
// 下一张图片
showIndex = (showIndex + 1) % images.length;
// 下一张图片从右侧移入
$(images[showIndex]).css('left', '100%').animate({ left: '0' }, 500);
}
// 页面加载后自动开始轮播
setInterval(toggleImage, 3000); // 每3秒切换一次图片
// ===== 2. 登录框功能 =====
// 显示登录框
$('#showLoginBtn').click(function() {
$('#overlay').fadeIn(); // 淡入显示遮罩层
$('#loginBox').css({
bottom: '20px', // 登录框放在页面底部
left: '50%',
transform: 'translateX(-50%)' // 水平居中
});
});
// 隐藏登录框
$('#overlay').click(function() {
$('#overlay').fadeOut(); // 淡出隐藏遮罩层
});
// 阻止点击登录框内部时触发隐藏
$('#loginBox').click(function(e) {
e.stopPropagation(); // 阻止事件冒泡
});
// 拖动功能
let isDragging = false;
let offsetX, offsetY;
$('.drag-header').mousedown(function(e) {
isDragging = true;
offsetX = e.clientX - $('#loginBox').offset().left; // 计算鼠标相对于登录框的偏移
offsetY = e.clientY - $('#loginBox').offset().top;
});
$(document).mousemove(function(e) {
if (isDragging) {
let x = e.clientX - offsetX;
let y = e.clientY - offsetY;
// 边界判断
const maxX = $(window).width() - $('#loginBox').outerWidth();
const maxY = $(window).height() - $('#loginBox').outerHeight();
x = Math.min(Math.max(0, x), maxX); // 限制在窗口范围内
y = Math.min(Math.max(0, y), maxY);
$('#loginBox').css({
left: x,
top: y
});
}
});
$(document).mouseup(function() {
isDragging = false; // 停止拖动
});
});
如此便完成了