-
Notifications
You must be signed in to change notification settings - Fork 0
/
cs1.html
87 lines (80 loc) · 3.37 KB
/
cs1.html
1
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图示例</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.carousel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 200px;
/* Set the height of the carousel */
background-color: #333;
color: white;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 1;
/* Ensure the carousel is below the content */
/* pointer-events: auto; */
/* Ensure the carousel is interactive */
}
.carousel-item {
width: 100%;
text-align: center;
}
.content {
position: relative;
z-index: 2;
/* Ensure the content is above the carousel */
margin-top: 200px;
/* Same as the height of the carousel */
padding: 20px;
background-color: white;
/* Ensure the background color to cover the carousel */
}
</style>
</head>
<body>
<div class="carousel" onclick="clickh()">
<div class="carousel-item">Slide 1</div>
<div class="carousel-item">Slide 2</div>
<div class="carousel-item">Slide 3</div>
</div>
<div class="content">
<p>Content after the carousel. Scroll to see the effect.</p>
<!-- Add more content here to enable scrolling -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et ligula in nunc bibendum fringilla a eu
lectus. Sed vel sapien lectus. Nullam a urna eget justo consequat dignissim eu nec arcu. Aliquam erat
volutpat. Sed ut dui aliquam, accumsan arcu a, convallis justo. Morbi quis nulla accumsan, vehicula quam
nec, vestibulum orci. Etiam euismod ligula quam, ut fermentum ex vehicula vel. Curabitur consectetur dui vel
magna varius dapibus. Ut dignissim elementum dolor non vestibulum. Proin eu felis auctor, dignissim sapien
et, aliquam leo. In imperdiet sapien nec mauris tempor cursus. Phasellus eget dui vitae tortor sodales
placerat. Nulla facilisi. Fusce a convallis odio.</p>
<p>... (more content) ...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et ligula in nunc bibendum fringilla a eu
lectus. Sed vel sapien lectus. Nullam a urna eget justo consequat dignissim eu nec arcu. Aliquam erat
volutpat. Sed ut dui aliquam, accumsan arcu a, convallis justo. Morbi quis nulla accumsan, vehicula quam
nec, vestibulum orci. Etiam euismod ligula quam, ut fermentum ex vehicula vel. Curabitur consectetur dui vel
magna varius dapibus. Ut dignissim elementum dolor non vestibulum. Proin eu felis auctor, dignissim sapien
et, aliquam leo. In imperdiet sapien nec mauris tempor cursus. Phasellus eget dui vitae tortor sodales
placerat. Nulla facilisi. Fusce a convallis odio.</p>
<p>... (more content) ...</p>
</div>
<script>
const clickh = ()=>{
console.log(123)
}
</script>
</body>
</html>