jQuery头像图片切换

原创已于 2025-06-27 13:29:50 修改 · 470 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-06 16:22:05 首次发布

<!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;
padding: 20px;
}
.avatar-container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.current-avatar {
text-align: center;
margin-bottom: 20px;
}
.current-avatar img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #ddd;
}
.avatar-thumbnails {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.avatar-thumbnail {
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.avatar-thumbnail:hover {
transform: scale(1.1);
border-color: #4CAF50;
}
.avatar-thumbnail.active {
border-color: #4CAF50;
transform: scale(1.1);
}
.footer {
text-align: center;
margin-top: 30px;
color: #666;
font-size: 14px;
}
/* 网址样式 */
.website-link {
color: #4CAF50;
text-decoration: none;
}
.website-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="avatar-container">
<h1>头像图片切换</h1>

<div class="current-avatar">
<img id="main-avatar" src="https://randomuser.me/api/portraits/women/65.jpg" alt="当前头像">
</div>

<div class="avatar-thumbnails">
<img class="avatar-thumbnail active" src="https://randomuser.me/api/portraits/women/65.jpg" alt="头像1" data-fullsize="https://randomuser.me/api/portraits/women/65.jpg">
<img class="avatar-thumbnail" src="https://randomuser.me/api/portraits/men/32.jpg" alt="头像2" data-fullsize="https://randomuser.me/api/portraits/men/32.jpg">
<img class="avatar-thumbnail" src="https://randomuser.me/api/portraits/women/44.jpg" alt="头像3" data-fullsize="https://randomuser.me/api/portraits/women/44.jpg">
<img class="avatar-thumbnail" src="https://randomuser.me/api/portraits/men/75.jpg" alt="头像4" data-fullsize="https://randomuser.me/api/portraits/men/75.jpg">
<img class="avatar-thumbnail" src="https://randomuser.me/api/portraits/women/68.jpg" alt="头像5" data-fullsize="https://randomuser.me/api/portraits/women/68.jpg">
</div>

<div class="footer">

</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 当点击缩略图时切换主图
$('.avatar-thumbnail').click(function() {
// 获取点击图片的大图URL
var fullsizeUrl = $(this).attr('data-fullsize');

// 更新主图
$('#main-avatar').attr('src', fullsizeUrl);

// 更新活动状态
$('.avatar-thumbnail').removeClass('active');
$(this).addClass('active');

// 添加简单的动画效果
$('#main-avatar').css({
'transform': 'scale(0.95)',
'opacity': '0.7'
}).animate({
'transform': 'scale(1)',
'opacity': '1'
}, 300);
});

// 随机切换头像的演示功能
function randomSwitch() {
var thumbnails = $('.avatar-thumbnail');
var randomIndex = Math.floor(Math.random() * thumbnails.length);
$(thumbnails[randomIndex]).click();
}

// 每5秒自动切换一次头像（可选）
// setInterval(randomSwitch, 5000);
});
</script>
</body>
</html>