分类：N05_python
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片切换与标签按钮</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #111111;
}
.image-container {
position: relative;
display: inline-block;
width: 80%;
max-width: 630px;
max-height: 1800px;
min-height: 900px;
}
img {
width: 100%;
height: auto;
border: 2px solid #ccc;
border-radius: 8px;
}
.button-container {
margin-top: 5px;
}
.button-container button {
padding: 10px 10px;
margin: 5px;
font-size: 14px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 4px;
}
.rank{
padding: 10px 20px;
margin: 5px;
font-size: 14px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
color: #fc0070;
}
.button-container button.selected {
background-color: #4CAF50;
color: white;
}
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 24px;
padding: 10px;
cursor: pointer;
border: none;
border-radius: 50%;
}
.prev-button {
left: -101px;
}
.next-button {
right: -100px;
}
</style>
</head>
<body style="background-color:#00000">
<!-- <h1>图片切换和标签按钮示例</h1> -->
<div>
<!-- 图片显示区域 -->
<img id="main-image" src="https://via.placeholder.com/600x300?text=Image+1" alt="Image">
<!-- 左右切换按钮 -->
<button class="nav-button prev-button" onclick="changeImage('prev')">❮</button>
<button class="nav-button next-button" onclick="changeImage('next')">❯</button>
</div>
<div class="button-container button-container1">
<!-- 标签按钮 -->
<div><span>请选等级：</span>
<button onclick="selectTag1(this, 1)" data-val="1">1</button>
<button onclick="selectTag1(this, 2)" data-val="2">2</button>
<button onclick="selectTag1(this, 3)" data-val="3">3</button>
<button onclick="selectTag1(this, 4)" data-val="4">4</button>
</div>
</div>
<div class="button-container button-container2">
<!-- 标签按钮 -->
<div><span>请选分类：</span>
{% for item in pics %}
<button data-val = "{{item.id}}">{{item.name}}</button>
{% endfor %}
</div>
</div>
<script src="/styles/first/js/jquery.1.11.3.min.js"></script>
<script>
// 图片数组
const images = [
{% for item in art_all %}
"{{item.name}}",
{% endfor %}
];
let currentImageIndex = 0;
var rankVal = 0; // 等级值
let cat_data = []; //分类ids
var img_src = '';
// 切换图片函数
function changeImage(direction) {
send_msg()
if (direction === 'next') {
currentImageIndex = (currentImageIndex + 1) % images.length;
} else if (direction === 'prev') {
currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
}
document.getElementById('main-image').src = images[currentImageIndex];
get_info(images[currentImageIndex])
}
// 监听键盘事件
document.addEventListener('keydown', function(event) {
send_msg()
if (event.key === 'ArrowLeft') {
currentImageIndex = (currentImageIndex + 1) % images.length;
} else if (event.key === 'ArrowRight') {
currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
}
document.getElementById('main-image').src = images[currentImageIndex];
get_info(images[currentImageIndex])
});
// 等级选择
function selectTag1(botton, val) {
const buttons = document.querySelectorAll('.button-container1 button');
buttons.forEach(btn => btn.classList.remove('selected'));
botton.classList.add('selected');
rankVal = val; // 选择的等级值
}
// 分类选择
const buttons = document.querySelectorAll('.button-container2 button');
// buttons.forEach(btn => btn.classList.remove('selected'));
// button.classList.add('selected');
buttons.forEach(item => {
item.addEventListener('click', function() {
// 切换 selected 类
item.classList.toggle('selected');
});
});
// 获取选择的等级
function get_cat_val(argument) {
cat_data = []
const buttons = document.querySelectorAll('.button-container2 button.selected');
buttons.forEach(button => {
// 获取每个按钮的 data-val 属性值
const dataVal2 = button.dataset.val;
if(!cat_data.includes(dataVal2)){
cat_data.push(dataVal2)
}
});
// alert(cat_data)
}
// 获取图片地址
function get_img_src(){
const img = document.getElementById('main-image');
img_src = img.getAttribute('src');
}
// 选择标签按钮并改变颜色
function removeSel() {
const buttons = document.querySelectorAll('.button-container button');
buttons.forEach(btn => btn.classList.remove('selected'));
}
function set_rank(rank) {
rankVal = 0; // 等级值
const buttons = document.querySelectorAll('.button-container1 button');
buttons.forEach(button => {
// 获取每个按钮的 data-val 属性值
const dataVal = button.dataset.val;
if(dataVal==rank){
button.classList.add('selected');
rankVal = rank
// alert("rank:"+rank)
}
console.log("Button data-val:", dataVal);
});
// alert(rankVal)
}
function set_cat(cat_all){
// alert("设置属性")
// alert(cat_all)
cat_data = []; //分类ids
const buttons = document.querySelectorAll('.button-container2 button');
cat_all.forEach(function(cat) {
cid = cat.cid
buttons.forEach(function(button) {
const dataVal2 = button.dataset.val;
// alert(dataVal2)
if(dataVal2==cid){
// alert("dataVal2:"+cid)
// alert(dataVal2)
// alert("执行了此行")
button.classList.add('selected');
cat_data.push(dataVal2)
}
});
});
// alert(cat_data)
}
// 向后台发送数据
function get_info(img_src) {
var csrf_token = '{{ csrf_token() }}';
$.post("/getinfo", {img_src:img_src,csrf_token:csrf_token}, function(data) {
if(data){
rank = data.rank
cat_all = data.cat_all
img_src = data.img_name
// alert(cat_all)
removeSel()
set_rank(rank)
set_cat(cat_all)
}else{
// alert("失败")
}
});
}
// 向后台发送数据
function send_msg() {
// alert('测试')
get_img_src()
get_cat_val()
var csrf_token = '{{ csrf_token() }}';
// 等级排序
// 分类id
cat_data2 = cat_data.toString();
$.post("/insert", {cat_data:cat_data2,rankVal:rankVal,img_src:img_src,csrf_token:csrf_token}, function(data) {
if(data){
// cat_data = []; //分类ids
// rankVal = 0; // 等级值
// img_src ='';
// removeSel()
// alert("成功")
}else{
// alert("失败")
}
});
}
</script>
</body>
</html>