|
|
@@ -96,16 +96,57 @@
|
|
|
button:hover {
|
|
|
background-color: #2c974b;
|
|
|
}
|
|
|
- .ad-container {
|
|
|
+ .carousel {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ perspective: 1000px;
|
|
|
+ position: relative;
|
|
|
margin-top: 30px;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
- .ad-container img {
|
|
|
- max-width: 100%;
|
|
|
- border-radius: 8px;
|
|
|
+ .carousel-inner {
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ transform: translateZ(-300px);
|
|
|
+ transition: transform 1s;
|
|
|
+ }
|
|
|
+ .carousel-item {
|
|
|
+ position: absolute;
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ transform-origin: center center;
|
|
|
+ transition: transform 1s, opacity 1s;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ .carousel-item.active {
|
|
|
+ transform: translateX(-50%) translateZ(300px);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .carousel-item.left {
|
|
|
+ transform: translateX(-150%) translateZ(100px) rotateY(30deg);
|
|
|
+ }
|
|
|
+ .carousel-item.right {
|
|
|
+ transform: translateX(50%) translateZ(100px) rotateY(-30deg);
|
|
|
+ }
|
|
|
+ .carousel-control {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ font-size: 2em;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .carousel-control.left {
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ .carousel-control.right {
|
|
|
+ right: 10px;
|
|
|
}
|
|
|
pre {
|
|
|
background-color: #f6f8fa;
|
|
|
@@ -211,9 +252,13 @@
|
|
|
width: 100%;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
- .ad-container img {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
+ .carousel {
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ .carousel-item {
|
|
|
+ width: 80%;
|
|
|
+ height: 70%;
|
|
|
+ left: 10%;
|
|
|
}
|
|
|
}
|
|
|
@media (min-width: 769px) {
|
|
|
@@ -224,7 +269,7 @@
|
|
|
.notification {
|
|
|
display: none;
|
|
|
position: absolute;
|
|
|
- top: 7px; /* Adjust the position as needed */
|
|
|
+ top: 7px;
|
|
|
left: 87%;
|
|
|
transform: translateX(-50%);
|
|
|
background-color: #333;
|
|
|
@@ -256,8 +301,12 @@
|
|
|
<button onclick="generateCommands()">获取加速命令</button>
|
|
|
</div>
|
|
|
<!-- 广告容器 -->
|
|
|
- <div class="ad-container" id="adContainer" style="display: flex;">
|
|
|
- <!-- 广告内容将通过 JavaScript 动态加载 -->
|
|
|
+ <div class="carousel" id="carousel">
|
|
|
+ <div class="carousel-inner" id="carouselInner">
|
|
|
+ <!-- 图片将在 JavaScript 中加载 -->
|
|
|
+ </div>
|
|
|
+ <div class="carousel-control left" onclick="prevSlide()">❮</div>
|
|
|
+ <div class="carousel-control right" onclick="nextSlide()">❯</div>
|
|
|
</div>
|
|
|
<!-- 结果容器 -->
|
|
|
<div id="result" style="display:none;">
|
|
|
@@ -278,6 +327,8 @@
|
|
|
document.getElementById('currentYear').textContent = new Date().getFullYear();
|
|
|
|
|
|
let proxyDomain = ''; // 默认代理加速地址
|
|
|
+ let currentIndex = 0;
|
|
|
+ let items = [];
|
|
|
|
|
|
// 生成加速命令
|
|
|
function generateCommands() {
|
|
|
@@ -321,7 +372,7 @@
|
|
|
|
|
|
// 显示结果并隐藏广告
|
|
|
resultDiv.style.display = 'block';
|
|
|
- document.getElementById('adContainer').style.display = 'none';
|
|
|
+ document.getElementById('carousel').style.display = 'none';
|
|
|
document.getElementById('backToTopBtn').style.display = 'block';
|
|
|
}
|
|
|
|
|
|
@@ -334,7 +385,6 @@
|
|
|
console.error('无法复制文本: ', err);
|
|
|
});
|
|
|
} else {
|
|
|
- // 回退方案：使用临时的 <textarea> 元素
|
|
|
const textarea = document.createElement('textarea');
|
|
|
textarea.value = text;
|
|
|
document.body.appendChild(textarea);
|
|
|
@@ -367,6 +417,45 @@
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ let autoPlayTimer; // 用于存储自动播放的定时器
|
|
|
+
|
|
|
+ // 更新轮播图
|
|
|
+ function updateCarousel() {
|
|
|
+ items.forEach((item, index) => {
|
|
|
+ item.classList.remove('active', 'left', 'right');
|
|
|
+ if (index === currentIndex) {
|
|
|
+ item.classList.add('active');
|
|
|
+ } else if (index === (currentIndex - 1 + items.length) % items.length) {
|
|
|
+ item.classList.add('left');
|
|
|
+ } else if (index === (currentIndex + 1) % items.length) {
|
|
|
+ item.classList.add('right');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function prevSlide() {
|
|
|
+ currentIndex = (currentIndex - 1 + items.length) % items.length;
|
|
|
+ updateCarousel();
|
|
|
+ resetAutoPlay(); // 重置自动播放计时器
|
|
|
+ }
|
|
|
+
|
|
|
+ function nextSlide() {
|
|
|
+ currentIndex = (currentIndex + 1) % items.length;
|
|
|
+ updateCarousel();
|
|
|
+ resetAutoPlay(); // 重置自动播放计时器
|
|
|
+ }
|
|
|
+
|
|
|
+ // 开始自动播放
|
|
|
+ function startAutoPlay() {
|
|
|
+ autoPlayTimer = setInterval(nextSlide, 10000); // 每10秒自动切换到下一张
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置自动播放计时器
|
|
|
+ function resetAutoPlay() {
|
|
|
+ clearInterval(autoPlayTimer);
|
|
|
+ startAutoPlay();
|
|
|
+ }
|
|
|
+
|
|
|
// 获取并加载配置
|
|
|
async function loadConfig() {
|
|
|
try {
|
|
|
@@ -389,34 +478,33 @@
|
|
|
});
|
|
|
}
|
|
|
if (config.adImages && Array.isArray(config.adImages)) {
|
|
|
- const adContainer = document.getElementById('adContainer');
|
|
|
- adContainer.innerHTML = ''; // 清空广告容器
|
|
|
+ const carouselInner = document.getElementById('carouselInner');
|
|
|
+ carouselInner.innerHTML = ''; // 清空广告容器
|
|
|
config.adImages.forEach((ad, index) => {
|
|
|
- const adLink = document.createElement('a');
|
|
|
- adLink.href = ad.link;
|
|
|
- adLink.target = '_blank';
|
|
|
+ const adItem = document.createElement('div');
|
|
|
+ adItem.className = 'carousel-item';
|
|
|
+ if (index === 0) {
|
|
|
+ adItem.classList.add('active');
|
|
|
+ }
|
|
|
const adImage = document.createElement('img');
|
|
|
adImage.src = ad.url;
|
|
|
adImage.alt = ad.alt || '广告图片';
|
|
|
- adImage.style.display = 'none'; // 初始状态隐藏所有广告图片
|
|
|
- adLink.appendChild(adImage);
|
|
|
- adContainer.appendChild(adLink);
|
|
|
- });
|
|
|
+ adImage.style.width = "100%";
|
|
|
+ adImage.style.height = "100%";
|
|
|
+ adItem.appendChild(adImage);
|
|
|
+ carouselInner.appendChild(adItem);
|
|
|
|
|
|
- // 轮播功能
|
|
|
- let currentAdIndex = 0;
|
|
|
- const adImages = adContainer.querySelectorAll('img');
|
|
|
- function showAd(index) {
|
|
|
- adImages.forEach((img, i) => {
|
|
|
- img.style.display = i === index ? 'block' : 'none';
|
|
|
+ // 添加点击事件监听器
|
|
|
+ adItem.addEventListener('click', function() {
|
|
|
+ window.open(ad.link, '_blank');
|
|
|
});
|
|
|
- }
|
|
|
- showAd(currentAdIndex); // 显示第一张广告图片
|
|
|
|
|
|
- setInterval(() => {
|
|
|
- currentAdIndex = (currentAdIndex + 1) % adImages.length;
|
|
|
- showAd(currentAdIndex);
|
|
|
- }, 5000); // 每5秒切换一次广告
|
|
|
+ // 改变鼠标样式，表明可以点击
|
|
|
+ adItem.style.cursor = 'pointer';
|
|
|
+ });
|
|
|
+ items = document.querySelectorAll('.carousel-item');
|
|
|
+ updateCarousel();
|
|
|
+ startAutoPlay(); // 启动自动播放
|
|
|
}
|
|
|
if (config.proxyDomain) {
|
|
|
proxyDomain = config.proxyDomain;
|
|
|
@@ -427,6 +515,14 @@
|
|
|
}
|
|
|
|
|
|
loadConfig();
|
|
|
+ // 当页面不可见时暂停自动播放，可见时恢复
|
|
|
+ document.addEventListener("visibilitychange", function() {
|
|
|
+ if (document.hidden) {
|
|
|
+ clearInterval(autoPlayTimer);
|
|
|
+ } else {
|
|
|
+ startAutoPlay();
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
dqzboy