半屏轮播图各占一半尺寸+手机换行自适应+覆盖到指定元素上方
支持的功能：
1、电脑显示宽度占屏幕100%的两个轮播图，每个占50%
2、手机上会换行，每个单独占100%，手机上每行下面会有独立显示的文字
3、支持覆盖在指定元素上面，利用html删除一个元素并插入到一个元素前面（用在一些网站不方便改的情况下，可以插入html但是又需要一些元素的位置的情况下）
被删除的元素：.wp-block-image.alignfull.size-large
插入这个元素之前：.nv-single-page-wrap.col
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<style>
/*手机*/
@media screen and (max-width: 768px) {
.d-container {
display: contents;
width: 100vw;
height: 25vh;
}
}
/*电脑*/
@media screen and (min-width: 769px) {
.d-container {
display: flex;
width: 100vw;
height: 700px;
}
.d-pc-none{
display:none;
}
}
.slideshow-container {
flex: 1;
position: relative;
}
.mySlides {
display: none;
width: 100%;
height: 100%;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 1;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.dot-container {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 2;
}
.dot {
display: inline-block;
width: 15px;
height: 15px;
background-color: #bbb;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.dot.active {
background-color: #ffffff;
}
</style>
<script>
let slideIndex = [1, 1]; // 初始化两个轮播图的索引
let slideContainers = document.getElementsByClassName('slideshow-container');
let slideInterval;
// 显示指定的轮播图
function showSlides(n, containerIndex) {
let slides = slideContainers[containerIndex].getElementsByClassName('mySlides');
let dots = slideContainers[containerIndex].getElementsByClassName('dot');
if (n > slides.length) { slideIndex[containerIndex] = 1; }
if (n < 1) { slideIndex[containerIndex] = slides.length; }
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(' active', '');
}
slides[slideIndex[containerIndex] - 1].style.display = 'block';
dots[slideIndex[containerIndex] - 1].className += ' active';
}
// 切换到上一张或下一张
function plusSlides(n, el) {
let containerIndex = Array.from(el.closest('.slideshow-container').parentNode.getElementsByClassName('slideshow-container')).indexOf(el.closest('.slideshow-container'));
showSlides(slideIndex[containerIndex] += n, containerIndex);
}
// 跳转到指定的轮播图
function currentSlide(n, el) {
let containerIndex = Array.from(el.closest('.slideshow-container').parentNode.getElementsByClassName('slideshow-container')).indexOf(el.closest('.slideshow-container'));
showSlides(slideIndex[containerIndex] = n, containerIndex);
}
// 自动切换轮播图
function startSlideShow() {
for (let i = 0; i < slideContainers.length; i++) {
showSlides(slideIndex[i], i);
}
slideInterval = setInterval(function() {
for (let i = 0; i < slideContainers.length; i++) {
plusSlides(1, slideContainers[i].querySelector('.arrow.next'));
}
}, 3000);
}
// 初始化轮播图
function initSlides() {
for (let i = 0; i < slideContainers.length; i++) {
showSlides(slideIndex[i], i);
}
startSlideShow();
}
function checkAndModifyDOM() {
const interval = 50; // 时间间隔为0.5秒
// 定义要插入的复杂HTML代码
const htmlContent = `
<div class="d-container">
<div class="slideshow-container">
<div class="mySlides"><img src="/wp-content/uploads/2024/08/1.jpg" style="width:100%;height:100%"></div>
<div class="mySlides"><img src="/wp-content/uploads/2024/08/2.jpg" style="width:100%;height:100%"></div>
<div class="mySlides"><img src="/wp-content/uploads/2024/08/3-1.jpg" style="width:100%;height:100%"></div>
<div class="mySlides"><img src="/wp-content/uploads/2024/08/4.jpg" style="width:100%;height:100%"></div>
<div class="mySlides"><img src="/wp-content/uploads/2024/08/5.jpg" style="width:100%;height:100%"></div>
<a class="arrow prev" onclick="plusSlides(-1, this)">❮</a>
<a class="arrow next" onclick="plusSlides(1, this)">❯</a>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1, this)"></span>
<span class="dot" onclick="currentSlide(2, this)"></span>
<span class="dot" onclick="currentSlide(3, this)"></span>
<span class="dot" onclick="currentSlide(4, this)"></span>
<span class="dot" onclick="currentSlide(5, this)"></span>
</div>
</div>
<div class="d-pc-none" style="margin: 10px;text-align: center;"><p><strong>Bison Equipment USA</strong><br>282 Lobachsville Road,<br>Oley, PA, USA 18031</p></div>
<div class="slideshow-container">
<div class="mySlides"><img src="/wp-content/uploads/2024/08/2-1.jpg" style="width:100%;height:100%"></div>
<div class="mySlides"><img src="/wp-content/uploads/2024/08/2-2.jpg" style="width:100%;height:100%"></div>
<a class="arrow prev" onclick="plusSlides(-1, this)">❮</a>
<a class="arrow next" onclick="plusSlides(1, this)">❯</a>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1, this)"></span>
<span class="dot" onclick="currentSlide(2, this)"></span>
</div>
</div>
<div class="d-pc-none" style="margin: 10px;text-align: center;"><p><strong>Bison Equipment Canada <font color="red">(Coming Soon…)</font></strong><br>1835 Brampton Street,<br>Hamilton,ON,Canada L8H 3S4</p></div>
</div>
`;
setInterval(() => {
const element = document.querySelector('.wp-block-image.alignfull.size-large');
if (element) {
element.remove(); // 删除找到的元素
// 创建一个包含指定HTML内容的新元素
const newElement = document.createElement('div');
newElement.innerHTML = htmlContent;
// 插入新元素到指定位置
const targetElement = document.querySelector('.nv-single-page-wrap.col');
if (targetElement) {
targetElement.insertAdjacentElement('beforebegin', newElement);
// 直接初始化轮播图
initSlides();
}
}
}, interval);
}
// 调用函数
checkAndModifyDOM();
</script>