TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑 $ F, r" v( z/ v
可以考慮用這個
% w# q1 L4 K( Y \9 ~/ U5 U# E* U照著套用應該是 OK 的
0 K* K: M1 J* Z6 k: X. a1 ^
- V4 C# J& D" k+ V; K" Mhttps://www.w3schools.com/howto/ ... tryhow_js_slideshow
: O7 S- C/ l+ s7 T6 i
! y' ?! W O* m# |: L- `8 N # w( _6 `! \% H
, U& z' L h ~8 W& I7 q/ `
<!DOCTYPE html>
& Z9 M" K2 R$ W0 X<html>
# M9 S0 ]9 U- p/ e. W<head>: `9 `# t4 F, }
<meta name="viewport" content="width=device-width, initial-scale=1">
' [3 q7 P; w7 N. `" y( r<style># l: f, o+ Z5 d$ C E. b. H
* {box-sizing: border-box}! Q2 N& X2 l* ^
body {font-family: Verdana, sans-serif; margin:0}( \6 O: x7 F. s5 y5 U8 T' V
.mySlides {display: none}2 y5 B( u# o Q1 C4 n2 L0 g
img {vertical-align: middle;}7 X1 C+ J, D) r0 D6 s4 u
3 ~. ^7 B: i6 {3 G& n# U/* Slideshow container */( l. J( y" Q9 \; W
.slideshow-container {. N: P) U, y( A
max-width: 1000px; e+ W& V& E; G# z/ A! }2 F8 `. q
position: relative;. c& e1 y' ~/ X3 \0 W
margin: auto;
2 `% N( n/ `- Z$ R9 Q& m. ]6 q o6 u}6 D1 o" Y s2 s8 i
; c% _* ?( O: X+ d8 a8 ?
/* Next & previous buttons */
1 J+ k$ b, {( X" R6 b5 d: s, W' l.prev, .next {2 I* U+ C' l7 S! H- T
cursor: pointer;6 H) {8 k1 N, U; x9 _2 g1 d1 I
position: absolute;
$ l) N: U' H: X8 g. | top: 50%;- p+ p! b6 a6 E- T4 }2 R! \! L4 u
width: auto;
* s. D4 B: s+ a* F: v( L! B' O! m padding: 16px;8 S+ n F ]: N; M. i: F
margin-top: -22px;. r/ m) K8 a+ J, n+ c. j' M
color: white;
# B2 X; X& B+ L4 o% a7 I font-weight: bold;
' |, E# q, J8 U3 h' b8 d2 m) ? font-size: 18px;' t: Q7 t" f! X8 X
transition: 0.6s ease;0 b j" y0 L7 Q( s& s1 |
border-radius: 0 3px 3px 0;
) W# }# g }& N# x+ _6 A user-select: none;! _0 Y3 b! E; O8 R% f9 Z5 p
}
! A3 Z! Q0 d5 X" I$ c/ N
C, c, `8 U/ k, [; Z9 \/* Position the "next button" to the right */) ^* m6 B0 m9 l& H: F+ V9 B4 f5 F8 N" F
.next {5 g7 U& | | x4 Y7 m& i
right: 0;
# ~- j, P* Z, n8 u$ M: H4 ~ border-radius: 3px 0 0 3px;7 j6 S% X' |9 v
}* ^4 P7 [: _2 B; @
' g$ F/ i" S& |/* On hover, add a black background color with a little bit see-through */
! x$ x2 ], P7 i3 s, h3 Q# M; j; l.prev:hover, .next:hover {
& _0 r( z) }4 r! v/ h1 O background-color: rgba(0,0,0,0.8);
0 V9 E3 U' T5 }; X}% K+ y M5 B6 q/ i8 D4 M! }5 Q0 V
$ j7 O* }+ }; o) W J7 g; w% N0 e3 w/* Caption text */
3 \) e. W2 v! V' I) b.text {# ~/ m1 S0 z/ W+ @
color: #f2f2f2;
" { E% \9 B* l# W' W& c font-size: 15px;
0 o( D% g* F4 T4 b padding: 8px 12px;
( N1 s J/ e; y4 [1 s position: absolute;) X M- P4 s% Z. r
bottom: 8px;
: ?/ X9 @" K1 P1 u# P; V$ [" r width: 100%; K o- g& |1 j. z2 y( k
text-align: center;
! r+ N& Y7 N; I9 I( H' @}, O- X' E& l9 v1 d' B+ |/ Y
; i+ A l) K/ c! P5 K4 B/* Number text (1/3 etc) */3 y3 ~) z& y5 v6 F
.numbertext {+ M0 }' U, F3 G
color: #f2f2f2;
& t1 |' E: e# j' k font-size: 12px;
! p3 w4 q+ B b padding: 8px 12px;
" f( @, j( z% Z( `- k( E position: absolute;4 R" \6 o$ Z5 A4 M& T! ^
top: 0;& a+ K7 t+ e! u( e2 g
}
8 Z$ f; z% q- s7 N8 Y
5 e! v: g7 K- F: B, c4 I/* The dots/bullets/indicators */# f9 `& T U- L/ ?/ c& h% {! J
.dot {
7 k4 R4 J& k- F9 y$ C0 U1 C# X cursor: pointer;
9 E$ `1 [* [1 Y2 _8 E) Y: i; z height: 15px;$ ^$ _9 C# e5 R) } L5 ?4 k* h" I: h
width: 15px;
/ O0 B$ w! I9 v5 Y* S margin: 0 2px;
3 k4 E- h; c+ T+ w background-color: #bbb;6 }, }$ X# b0 G# n; h3 U$ c) `
border-radius: 50%;( a5 P/ h s n; T! n9 Q& c
display: inline-block;: S/ y# l: Z& i8 h8 m& C
transition: background-color 0.6s ease;& }5 ~+ |1 i- g. K, P( T& Z& w
}
B$ h/ e1 k0 R' o( v( {% v
3 O4 J6 D3 `8 y0 K, [0 O.active, .dot:hover {% t" M$ s& M; |! K
background-color: #717171;6 I9 B, f) I8 t) G6 L
}
& P4 t2 F% j$ Y4 a. N9 T0 F" p/ s$ \- R: ?9 q2 A$ B
/* Fading animation */, L0 w9 s; _& a, w5 `
.fade {$ p3 \2 L( z) ?: y
-webkit-animation-name: fade;
& I B& D+ u" V; V9 q -webkit-animation-duration: 1.5s;
( {2 T% m6 L' b# A( F/ @5 ?" ]9 | animation-name: fade;0 C2 [/ E5 ^1 Q- M4 A" j' N. x+ O5 I
animation-duration: 1.5s;- h3 s3 m; e* N
}
; R- R/ i" }! B/ ~3 l+ p, L/ p. ~* k/ Q( D% _9 A0 @
@-webkit-keyframes fade {
8 T8 G- x! S& o- I5 }5 { from {opacity: .4} 7 b& ?; ]8 W& e0 s8 y* B
to {opacity: 1}, t% b; M; ^2 x0 F
}0 Y- ~% ]7 P3 ^( k0 G
; i1 p8 d1 }8 l/ y# Q' { g
@keyframes fade {$ Y. U4 a$ @" O4 I& l3 `- O
from {opacity: .4}
0 T O9 h8 ~, B to {opacity: 1}+ h8 p/ ~9 e$ A1 [
}
% J" d8 k/ N4 s
% k; z- x L" e& J9 j6 y1 M, V2 s/* On smaller screens, decrease text size */
) [# F6 m' z; T1 l& r* E9 E- _@media only screen and (max-width: 300px) {) ~ x$ d/ t' Q( E
.prev, .next,.text {font-size: 11px}
& H. p( E- r' _}
( s$ v# X9 T/ Q</style>
: i( A) N6 |7 a" \" k2 V* R</head>" G G. e; t8 L3 R
<body>
8 b' k. ?: {/ _8 w
$ u* E2 k: J) C) K4 L<div class="slideshow-container">
* l3 y2 r% a2 W
0 x$ e0 C5 d/ S) O) v% y( H<div class="mySlides fade">
* O8 D2 s8 a3 _, h% f4 d; h- |0 ] <div class="numbertext">1 / 3</div>
/ a. `& x8 T: F, T& P; C. { <img src="img_nature_wide.jpg" style="width:100%">
- O+ B" `& E) w9 X; W <div class="text">Caption Text</div>. h" {1 ~ ?# x5 d' p2 y+ J7 @
</div>+ b" C+ s0 Q7 m2 J1 B$ b0 N
7 P$ O$ c g- B4 c5 F( j. [& G1 `9 E<div class="mySlides fade">
! t( s1 K7 t" K; W# L0 T5 Y V; ^ <div class="numbertext">2 / 3</div>
4 J3 t/ m7 b* d/ t/ S; b4 o/ c <img src="img_snow_wide.jpg" style="width:100%">
8 [/ z6 X/ U' K; }. ~! A <div class="text">Caption Two</div># g- W, } i( X' U9 q2 I
</div>
: v$ f2 W( K( U/ s( L+ E6 R9 {2 m+ ^
<div class="mySlides fade">
' j6 Z- o. S/ E: }1 G9 R7 U& j$ L <div class="numbertext">3 / 3</div>* c' B5 U: C7 k7 E2 H
<img src="img_mountains_wide.jpg" style="width:100%">: O7 X* W1 @5 M
<div class="text">Caption Three</div># K- K+ e; J }8 h8 N" }& J2 C6 l
</div>+ e! _; \0 N s8 p* r
& Y6 s6 l2 `# e<a class="prev">❮</a>' @2 @( u/ V# M( X: x+ ?8 a
<a class="next">❯</a>' ~/ Q9 _+ U0 l$ h' }( x" d
1 F! L) f3 ?/ O) f1 s
</div>
! L) b g3 R0 K<br>
$ r' ~0 F1 Q' I. G2 t2 D3 H5 I M# p4 G+ d
<div style="text-align:center">
1 }( @( v9 [1 T3 a) K) r <span class="dot"></span>
6 B' ~( B% B9 [( b* E <span class="dot"></span>
& A2 b# l* W% D <span class="dot"></span>
9 [3 I# X* U* Z, S</div>9 c1 W6 c1 j# ^' L- {+ t
% H& E' z7 F9 n$ p c8 S3 j! b& O: B
<script>
* E- a4 t0 S; R2 _1 ~var slideIndex = 1;# m; V ~5 s! t
showSlides(slideIndex);
0 s( a2 I3 j, ~
2 u: F7 O( q" }- }- |+ N% Ofunction plusSlides(n) {
' U, z m* ]3 {! `2 c showSlides(slideIndex += n);2 D3 A) m' d) q' |" x7 B
}) S) S* M, A5 @: e$ ~& @
) j# _/ E: f6 j x/ T, m
function currentSlide(n) {
* ~4 F4 S, T- S) ? showSlides(slideIndex = n);
) K- `" |$ D7 y; ^}7 q8 [' p% c, h S6 E
7 G6 D) K1 C* `
function showSlides(n) {
1 Y8 d8 J( G; I, e& { var i;
2 V5 F9 m. l6 o var slides = document.getElementsByClassName("mySlides");
3 i) E: s0 p2 A/ B( o* M var dots = document.getElementsByClassName("dot");
! B# }. P% P' W if (n > slides.length) {slideIndex = 1}
9 X& U3 G; L! c5 [: X2 J' q if (n < 1) {slideIndex = slides.length}* h# \$ T$ a% f
for (i = 0; i < slides.length; i++) {& L1 J) M9 g' S2 Q V7 Q: N
slides.style.display = "none"; ' q& V, F6 k$ S5 P+ q1 O2 o
}9 U: h' x, i3 N0 B: G
for (i = 0; i < dots.length; i++) {6 j, s% R/ V5 B; l- m b
dots.className = dots.className.replace(" active", "");; M6 r' J" w* r8 e/ E6 b; d* A
}: d+ P7 j( X; L6 |3 p
slides[slideIndex-1].style.display = "block"; / N* a3 e/ b: T% J* d; P: u- g
dots[slideIndex-1].className += " active";
! [* h' f, H3 f+ ~5 p}, m( z5 u, {3 S9 n! t
</script>
6 K" e6 S2 o, O H
. u1 C$ f- }3 A8 q% ~</body>3 _0 C: h* m! v7 n; ~7 g
</html>
|
|
楼主: starmars
楼主
