低仿pixiv自动轮播背景

2023.08.02 10:05 | 访问量:

改了又改的背景终于是看的过去了，再次重写ui后，写篇博客记录一下

svg图都是去阿里的图标库里找的

需要引用jQuery

Demo

bg.css
bg.js

<link rel="stylesheet" href="https://muxmus.com/blog/20230802/bg.css">
<script src="https://muxmus.com/js/jquery-3.6.0.min.js"></script>

<div id="bg"></div>
<script src="https://muxmus.com/blog/20230802/bg.js"></script>
				

ps：bg.js文件可能需要引用在</div>的后面

ps：下面的示例直接使用的pixiv的图片，可自行改用代理，或其他图片

// JavaScript Document
$("#bg").append("<div id=\"bg1\"></div><div id=\"bg2\"></div><div id=\"artist\"><span id=\"bgName\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img id=\"bf\" class=\"bf\" src=\"https://muxmus.com/img/bf.svg\" alt=\"\" ><img id=\"zt\" class=\"zt\" src=\"https://muxmus.com/img/zt.svg\" alt=\"\" ><img id=\"yc\" class=\"yc\" src=\"https://muxmus.com/img/yc.svg\" alt=\"\" ><img id=\"xs\" class=\"xs\" src=\"https://muxmus.com/img/xs.svg\" alt=\"\" ><a id=\"title\" href=\"\" target=\"_blank\"></a></span></div><div class=\"left\"><div class=\"left1\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 32 32\"><path d=\"M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z\"></path></svg></div></div><div class=\"right\"><div class=\"right1\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 32 32\"><path d=\"M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z\"></path></svg></div></div>");
var img = [
	{
		id: "34844544",  \\这里放p站作品id
		title: "星月夜",  \\这里放作品名称
		artist: "c7肘",  \\这里放作品画师
		url: "2013/04/07/01/53/07/34844544_p0.jpg"  \\这里放p站作品原图后面那一长串
	},
	{
		id: "id",
		title: "title",
		artist: "artist",
		url: "url"
	},
	...
];
var bgCount = img.length - 1;
var bgOriginal = new Array;
var bgI = 0;
var bgNum = 0;
var bgFlag = 0;
var lastFlag = 0;
for (var bgJ = 0; bgJ <= bgCount; bgJ++){
    bgOriginal[bgJ] = bgJ;
}
bgOriginal.sort(function(){
    return 0.5 - Math.random();
});
function secondClick(){
	var timer = setInterval(function(){
		nextSwitch();
	},60000);
	$("#bf").click(function(){
    	 $("#bf").attr("class","zt");
    	 $("#zt").attr("class","bf");
    	 clearInterval(timer);
    });
    $("#zt").click(function(){
    	 $("#bf").attr("class","bf");
    	 $("#zt").attr("class","zt");
    	 secondClick();
    });
}
function nextSwitch(){
	if(bgI <= bgCount){
		autoSwitch();
	}else{
		bgNum = bgOriginal[bgCount];
		bgOriginal.sort(function(){
			return 0.5 - Math.random();
		});
		ifNext();
		bgI = 0;
		autoSwitch();
	}
}
function lastSwitch(){
	if(bgI >= 2){
		bgI -= 2;
		autoSwitch();
	}else{
		bgNum = bgOriginal[0];
		bgOriginal.sort(function(){
			return 0.5 - Math.random();
		});
		ifLast();
		bgI = bgCount;
		autoSwitch();
	}
}
function autoSwitch(){
	if(bgFlag == 0){
		$("#bg1").attr("style","position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; transform: translate(0px, 0px); background: url(\"https://i.pximg.net/img-original/img/" + img[bgOriginal[bgI]].id + "\") center center / cover no-repeat fixed black; z-index: -10; opacity: 1;");
		document.getElementById("title").innerHTML = "id：" + img[bgOriginal[bgI]].id + " | 画师：" + img[bgOriginal[bgI]].artist;
	}else{
		$("#bg1").attr("style","position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; transform: translate(0px, 0px); background: url(\"https://i.pximg.net/img-original/img/" + img[bgOriginal[bgI]].id + "\") center center / cover no-repeat fixed black; z-index: 119; opacity: 1;");
		document.getElementById("title").innerHTML = "id：" + img[bgOriginal[bgI]].id + " | 画师：" + img[bgOriginal[bgI]].artist;
	}
	$("#title").attr("href","https://www.pixiv.net/artworks/" + img[bgOriginal[bgI]].id);
	if(bgI < bgCount){
		bgI += 1;
		$("#bg2").attr("style","position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; transform: translate(0px, 0px); background: url(\"https://i.pximg.net/img-original/img/" + img[bgOriginal[bgI]].id + "\") center center / cover no-repeat fixed black; z-index: -11; opacity: 0;");
	}else{
		bgI += 1;
	}
}
function ifNext(){
	if(bgOriginal[0] == bgNum){
		bgOriginal.sort(function(){
			return 0.5 - Math.random();
		});
		ifNext();
	}
}
function ifLast(){
	if(bgOriginal[bgCount] == bgNum){
		bgOriginal.sort(function(){
			return 0.5 - Math.random();
		});
		ifLast();
	}
}
$(function(){
	autoSwitch();
});
if(document.all){
    window.attachEvent('onload',secondClick);
}
else{
    window.addEventListener('load',secondClick,false);
}
$(function(){
    $("#yc").click(function(){
    	$("#yc").attr("class","xs");
    	$("#xs").attr("class","yc");
    	document.getElementById("bg1").style.zIndex = "119";
    	bgFlag = 1;
    });
    $("#xs").click(function(){
    	$("#yc").attr("class","yc");
    	$("#xs").attr("class","xs");
    	document.getElementById("bg1").style.zIndex = "-10";
    	bgFlag = 0;
    });
    $(".left").click(function(){
    	lastSwitch();
    });
    $(".right").click(function(){
    	nextSwitch();
    });
});