swiper轮播+吸顶悬浮（原创）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1,viewport-fit=cover" />
<link rel="stylesheet" href="https://www.jq22.com/demo/xdxf202305240924/css/swiper-bundle.css">
<link rel="stylesheet" href="https://www.jq22.com/demo/xdxf202305240924/css/zt.css?1.0">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.4.1/swiper-bundle.min.js"></script>
<script src="https://www.jq22.com/demo/xdxf202305240924/js/zt.js"></script>
</head>
<body>
<div class="zt">
<div>
<h2>
向下滚动网页查看效果
</h2>
<h2>
99999
</h2>
<h2>
99999
</h2>
<h2>
99999
</h2>
<h2>
99999
</h2>
</div>
<div class="zt_top">
<div class="swiper2">
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="sw_fixed" style="background-color: #f7ffdf;">
<div>
吸顶悬浮
</div>
<div>
可左右滑动
</div>
<div>
22-12-31
</div>
<div>
22-09-30
</div>
</div>
</div>
<div class="swiper-slide">
<div class="sw_fixed">
<div>
项目2
</div>
<div>
23-03-31
</div>
<div>
22-12-31
</div>
<div>
22-09-30
</div>
</div>
</div>
<div class="swiper-slide">
<div class="sw_fixed">
<div>
项目3
</div>
<div>
23-03-31
</div>
<div>
22-12-31
</div>
<div>
22-09-30
</div>
</div>
</div>
</div>
</div>
<div class="swiper1">
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul class="forecast_list">
<li>
<div>
项目1
</div>
<div>
23-03-31
</div>
<div>
22-12-31
</div>
<div>
22-09-30
</div>
</li>
<li>
<div>
122
</div>
<div>
367.52
</div>
<div>
217.19
</div>
<div>
-14.84
</div>
</li>
<li>
<div>
666
</div>
<div>
-42.66
</div>
<div>
-38.71
</div>
<div>
-14.23
</div>
</li>
<li>
<div>
777
</div>
<div>
-265.28
</div>
<div>
-264.08
</div>
<div>
-0.41
</div>
</li>
<li>
<div>
888
</div>
<div>
84.59%
</div>
<div>
48.39%
</div>
<div>
-4.59%
</div>
</li>
<li>
<div>
122
</div>
<div>
367.52
</div>
<div>
217.19
</div>
<div>
-14.84
</div>
</li>
<li>
<div>
666
</div>
<div>
-42.66
</div>
<div>
-38.71
</div>
<div>
-14.23
</div>
</li>
<li>
<div>
777
</div>
<div>
-265.28
</div>
<div>
-264.08
</div>
<div>
-0.41
</div>
</li>
<li>
<div>
888
</div>
<div>
84.59%
</div>
<div>
48.39%
</div>
<div>
-4.59%
</div>
</li>
<li>
<div>
NOPLAT
</div>
<div>
211.86
</div>
<div>
645.26
</div>
<div>
455.90
</div>
</li>
<li>
<div>
122
</div>
<div>
52.44
</div>
<div>
366.98
</div>
<div>
94.05
</div>
</li>
<li>
<div>
666
</div>
<div>
2.18
</div>
<div>
-55.36
</div>
<div>
-26.70
</div>
</li>
<li>
<div>
777
</div>
<div>
-0.23
</div>
<div>
-574.24
</div>
<div>
-298.64
</div>
</li>
<li>
<div>
888
</div>
<div>
16.68%
</div>
<div>
74.79%
</div>
<div>
27.66%
</div>
</li>
</ul>
</div>
<div class="swiper-slide">
<ul class="forecast_list">
<li>
<div>
项目2
</div>
<div>
22-06-30
</div>
<div>
22-03-31
</div>
<div>
21-12-31
</div>
</li>
<li>
<div>
122
</div>
<div>
367.52
</div>
<div>
217.19
</div>
<div>
-14.84
</div>
</li>
<li>
<div>
666
</div>
<div>
-42.66
</div>
<div>
-38.71
</div>
<div>
-14.23
</div>
</li>
<li>
<div>
777
</div>
<div>
-265.28
</div>
<div>
-264.08
</div>
<div>
-0.41
</div>
</li>
<li>
<div>
888
</div>
<div>
84.59%
</div>
<div>
48.39%
</div>
<div>
-4.59%
</div>
</li>
<li>
<div>
122
</div>
<div>
367.52
</div>
<div>
217.19
</div>
<div>
-14.84
</div>
</li>
<li>
<div>
666
</div>
<div>
-42.66
</div>
<div>
-38.71
</div>
<div>
-14.23
</div>
</li>
<li>
<div>
777
</div>
<div>
-265.28
</div>
<div>
-264.08
</div>
<div>
-0.41
</div>
</li>
<li>
<div>
888
</div>
<div>
84.59%
</div>
<div>
48.39%
</div>
<div>
-4.59%
</div>
</li>
<li>
<div>
NOPLAT
</div>
<div>
305.79
</div>
<div>
177.12
</div>
<div>
552.78
</div>
</li>
<li>
<div>
122
</div>
<div>
-0.11
</div>
<div>
-68.76
</div>
<div>
640.28
</div>
</li>
<li>
<div>
666
</div>
<div>
-17.05
</div>
<div>
-12.40
</div>
<div>
-55.62
</div>
</li>
<li>
<div>
777
</div>
<div>
-283.18
</div>
<div>
-0.03
</div>
<div>
-265.64
</div>
</li>
<li>
<div>
888
</div>
<div>
-0.02%
</div>
<div>
-19.04%
</div>
<div>
110.55%
</div>
</li>
</ul>
</div>
<div class="swiper-slide">
<!-- <div class="sw_fixed">
<div>
项目3
</div>
<div>
23-03-31
</div>
<div>
22-12-31
</div>
<div>
22-09-30
</div>
</div> -->
<ul class="forecast_list">
<li>
<div>
项目3
</div>
<div>
21-09-30
</div>
<div>
21-06-30
</div>
<div>
21-03-31
</div>
</li>
<li>
<div>
NOPLAT
</div>
<div>
393.08
</div>
<div>
259.44
</div>
<div>
146.95
</div>
</li>
<li>
<div>
122
</div>
<div>
367.52
</div>
<div>
217.19
</div>
<div>
-14.84
</div>
</li>
<li>
<div>
666
</div>
<div>
-42.66
</div>
<div>
-38.71
</div>
<div>
-14.23
</div>
</li>
<li>
<div>
777
</div>
<div>
-265.28
</div>
<div>
-264.08
</div>
<div>
-0.41
</div>
</li>
<li>
<div>
888
</div>
<div>
84.59%
</div>
<div>
48.39%
</div>
<div>
-4.59%
</div>
</li>
<li>
<div>
122
</div>
<div>
367.52
</div>
<div>
217.19
</div>
<div>
-14.84
</div>
</li>
<li>
<div>
666
</div>
<div>
-42.66
</div>
<div>
-38.71
</div>
<div>
-14.23
</div>
</li>
<li>
<div>
777
</div>
<div>
-265.28
</div>
<div>
-264.08
</div>
<div>
-0.41
</div>
</li>
<li>
<div>
888
</div>
<div>
84.59%
</div>
<div>
48.39%
</div>
<div>
-4.59%
</div>
</li>
<li>
<div>
122
</div>
<div>
367.52
</div>
<div>
217.19
</div>
<div>
-14.84
</div>
</li>
<li>
<div>
666
</div>
<div>
-42.66
</div>
<div>
-38.71
</div>
<div>
-14.23
</div>
</li>
<li>
<div>
777
</div>
<div>
-265.28
</div>
<div>
-264.08
</div>
<div>
-0.41
</div>
</li>
<li>
<div>
888
</div>
<div>
84.59%
</div>
<div>
48.39%
</div>
<div>
-4.59%
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>
99999
</h2>
<h2>
99999
</h2>
<h2>
99999
</h2>
<h2>
99999
</h2>
<h2>
99999
</h2>
</div>
</body>
</html>
页:
[1]