TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑 $ ^" m2 f% T) t9 x* @# X( F8 m1 n
可以考慮用這個5 |+ c7 d( d3 s* H
照著套用應該是 OK 的" m: [& |7 {! F3 d0 ~$ u
( U$ U$ w: t H8 }https://www.w3schools.com/howto/ ... tryhow_js_slideshow
$ G' @+ Y0 n8 R# C! ]7 p# q2 H S' P6 b. e& H8 |
3 b8 q& I% b. T# ]+ K, _
' J5 H' P) i$ L4 B
<!DOCTYPE html>
. m# E( |" `' ^: n( U* ^* X: B, j<html>0 z0 A) z3 G) z! f
<head>
! W! V9 v4 A6 e& e$ C# X<meta name="viewport" content="width=device-width, initial-scale=1">
; b0 X6 ^1 c0 f! z- X<style>
- G; @. B) L6 @4 W3 m: o* {box-sizing: border-box}
8 |/ B- E/ ?7 jbody {font-family: Verdana, sans-serif; margin:0}
4 r4 e# n9 S) q7 J) l% |& ~.mySlides {display: none}
3 `( n5 p3 `# E0 w- kimg {vertical-align: middle;}5 `0 @7 j5 f0 l* Y/ A3 Z! j! q
; I4 s" `2 v: T+ G6 V9 C: F @: r
/* Slideshow container */1 P2 q. z$ g8 a, C. y
.slideshow-container {
/ S* S" N7 P+ i( B! ?/ O& w max-width: 1000px;
# s1 ^" L- a1 S9 B8 `+ P+ V- L2 }4 Q8 I position: relative;
& h8 X# h, N& r/ P8 S margin: auto;) M: b" P9 N: b/ v, A
}1 u2 }9 X2 m, m, ^% D9 O
& _ r- Y+ V9 n* ^+ n: O/* Next & previous buttons */- R1 x6 E1 d* b1 l: y( w# g: H& A
.prev, .next {
7 W& e- z7 O& s1 L cursor: pointer;! G! d2 ]- ?5 v
position: absolute;. Q' H" x, h& U6 w C9 j
top: 50%;9 a$ Q% A* R5 \' l" B5 J) L! T
width: auto;
( N. r, f3 A* w) Z8 y! A padding: 16px;
9 `5 a" n4 N# i& o% L5 Y margin-top: -22px;
) Q# |7 D1 g# L& ^ x color: white;
. [2 T! T# m# F# S font-weight: bold;! _9 K2 e* L# J+ `; |5 U$ [
font-size: 18px;
$ ^+ _8 C$ L7 D: k, l8 ^8 k/ V transition: 0.6s ease;
7 ~( n& z; e5 J( y1 k border-radius: 0 3px 3px 0;# I7 Q9 g9 K u+ s k0 C
user-select: none;
& V" S! M- v$ M- B1 N4 u o}( [' p4 j: I& i" a' v. s
0 F* k2 O+ U/ o+ x/* Position the "next button" to the right */
- b v( y) G+ w: Y7 P.next {6 t, I# l8 W/ U! f. H/ b5 u# p
right: 0;
* z& r4 U- G4 P4 }! }6 W border-radius: 3px 0 0 3px;4 x; a1 s0 |8 N+ P
}! R* S7 D& e- w+ w" q- T
4 g; H+ ` R5 j6 z5 a- [/ @; {, b [
/* On hover, add a black background color with a little bit see-through */8 z' Z# Z. }3 f+ b) S2 s
.prev:hover, .next:hover {
5 ], a. p% N' ?7 l- H4 w! x$ r- S2 H background-color: rgba(0,0,0,0.8);' i% K+ D6 e2 _' f' |: q
}! [7 U+ Q! p: }! r' E$ A4 d2 M
/ a' x- d* ?' U$ M/* Caption text */
# O1 _7 s: w. v.text {/ ^3 Y7 y6 }) v& a
color: #f2f2f2;
\+ C4 E! b$ L9 Z$ v font-size: 15px;
$ L! b8 N3 ?# Z padding: 8px 12px;, b' K l$ `' d
position: absolute;
5 S; _ R) w; k; E' N bottom: 8px;
( Y+ o! o- F: u0 `4 i- `8 y2 c8 p ~ width: 100%;
# F5 ^+ Z4 ^ G& U b. z. W text-align: center;. Y3 ^& ]; J+ l: O9 @
}0 U2 u5 X: O6 h/ N
% `, O0 B n, r: m- ~
/* Number text (1/3 etc) */0 e5 b2 r- t* {
.numbertext {1 ~( _+ E$ W. `
color: #f2f2f2;* x4 d3 {; z F3 T5 C
font-size: 12px;$ e- ~1 i- k0 H. |$ w
padding: 8px 12px;/ `% P+ ^" r& K' ~. G
position: absolute;
, {; r( _3 _) g5 { top: 0;
7 Z# o' l, C( \7 q6 w' `% G' i}5 k+ ?0 p# J1 J6 p* P, A" R6 n( v
: d, j4 O4 H$ r+ | ]/* The dots/bullets/indicators */
6 `! U; c/ u4 J6 f5 R! i% B/ G.dot {
4 ^* D* n$ `3 L, L4 f# f7 g cursor: pointer;
$ k" x- F& L1 I9 f6 e height: 15px;
( P k' F, d; x% s) [3 J width: 15px;
5 W3 R5 X k$ N/ e margin: 0 2px;
7 N6 C: r9 A, W background-color: #bbb;! b; u' H9 C* p) t+ E
border-radius: 50%;7 x% }* Z( d+ H" N6 S
display: inline-block;
' X" x( S" ?* K& o( x transition: background-color 0.6s ease;
- O; o/ b8 y5 P8 _}
5 S5 l6 J: y, R( u6 I/ O. `- y& ?/ i$ u% T$ z4 L
.active, .dot:hover {% B* T# Y v3 u% Q7 P$ V
background-color: #717171;
# G& d$ B3 G+ H! A& C% n}6 e! ~( M5 L* j1 W. e2 v
' m- N8 v+ a/ _ t z2 {, M
/* Fading animation */& m; J2 Y+ I* K' E! s, ^
.fade {
F6 S3 S* z" S* O -webkit-animation-name: fade;
' b3 B3 T B4 b+ U; m -webkit-animation-duration: 1.5s;
7 I$ v9 g* v6 W1 e2 i+ L% e/ S6 \ animation-name: fade;
. f" |0 n3 P8 [1 C% i animation-duration: 1.5s;& {+ i5 N0 X, U& J4 r: q
}
+ H; o' s9 l8 [
7 U7 p5 N/ d# w" Q* r! i@-webkit-keyframes fade {
2 P, b* Q8 j+ L+ { from {opacity: .4}
% |: `% ]' |" D, a/ K to {opacity: 1}; a/ u0 G8 B! \& E/ g
}2 s/ L* x& V8 V3 i) z$ L1 }2 ?- S
8 X$ z" a# v" y9 j7 P% r- N4 O@keyframes fade {
& a0 M+ p! Y# ?8 h7 s2 c9 V from {opacity: .4} 2 m+ L, e; o) w4 Y' a" ?6 @ l
to {opacity: 1}
, c5 h" P4 J# M4 M$ V0 [. a+ b7 b}
5 t4 {0 T7 e) O! @* I, j! I4 {+ X) ~+ ~- @
/* On smaller screens, decrease text size */2 u9 c: f s, U* U( o7 \4 s2 y; W
@media only screen and (max-width: 300px) {: `# Z0 ?0 _% d; I% [
.prev, .next,.text {font-size: 11px}. ^" e8 P. W/ B/ T8 H/ L# Q9 ]0 M4 Y4 B+ p
}
! U* ]4 \2 q8 G- K9 W" m</style>3 y* x0 n: H& e5 V1 H$ {
</head>9 ?7 k' Z H, W$ Z1 v# U, M% c
<body>
4 X6 }+ w' Z) H6 U7 `% w# z8 i( Q1 p! {, ~6 [8 E
<div class="slideshow-container">8 A1 [" M; P# T
}3 C9 r+ r9 {% v. u& F9 n<div class="mySlides fade">
+ D" Y" V3 t2 g! [. i9 m- w <div class="numbertext">1 / 3</div>
+ \2 Z f1 c9 Y, V, c+ y <img src="img_nature_wide.jpg" style="width:100%">( h, y, B, D, C, j) H
<div class="text">Caption Text</div>/ R6 P# Y L4 g. W: F- p( ?
</div>9 j- J, K. r# w) f+ Z" R
' d6 e/ s0 O% ^1 M<div class="mySlides fade">
; B" K+ ]! t2 s; h <div class="numbertext">2 / 3</div>9 m/ j( K8 ~& V
<img src="img_snow_wide.jpg" style="width:100%">" ~6 q: y: e& B; Z* X
<div class="text">Caption Two</div>9 A; f' J: x3 \3 h" U% }% s- ^
</div>
3 q% B+ u- {) z5 }% ]' P1 E! g3 b0 ]7 J& Y; s9 n
<div class="mySlides fade">0 w; x# w& E o! I ~$ C6 T
<div class="numbertext">3 / 3</div>0 s# [, O2 M( k% `
<img src="img_mountains_wide.jpg" style="width:100%">% t- x0 c, h/ T
<div class="text">Caption Three</div># u) y/ l2 M8 t$ X$ x* y" C
</div>
' ^2 K+ T. h* i, y) ]0 I. L. }8 a+ B( }' `6 d& c
<a class="prev">❮</a>0 _2 Y9 O3 I8 |8 f1 U( O
<a class="next">❯</a>2 f2 j# y. g8 d. L5 f6 _, s# w4 P
, c9 x7 U! `; ]# M1 \
</div>
$ F: d9 u2 S: x- O6 O- a% I& M<br>) d: r# g% s$ V2 q. Q- Y$ ?1 Q
! V0 ~7 Z2 F4 o$ x! R
<div style="text-align:center">2 k7 U0 U+ N2 Z
<span class="dot"></span>
4 v: o1 \" W, e/ K <span class="dot"></span>
. E1 h' _+ F, K3 p <span class="dot"></span>
% R6 G# C) B) u. J( z</div>
, b( Z/ D# K8 }
6 C. [* h$ }. S/ d6 Q<script>
& X" g0 I( n& \1 g; J9 ~5 Evar slideIndex = 1;8 K1 F3 l) d" k7 x
showSlides(slideIndex);* }# u4 `0 N% N: r; y) j7 x- U
, m: e" O, \6 N! ^2 cfunction plusSlides(n) {
% ?+ E5 v. {, `& k showSlides(slideIndex += n);
& Q3 J+ T5 z5 m9 r}) |+ {- Q# _. H# l$ M! x6 l" H
6 S( j$ O0 K8 N/ d3 j2 L" D: Zfunction currentSlide(n) {) f! S. k2 V5 O' R' M5 s* j
showSlides(slideIndex = n);
9 p' [. s9 E! j}
" c& s6 f* x4 D3 ?" c9 a" [
/ t. }& B5 `* x0 |( _* T' x) Bfunction showSlides(n) {1 L4 k# [3 M; E- h3 e
var i;
8 N( B$ C) I: i2 B- c% {9 m& o var slides = document.getElementsByClassName("mySlides");
* X7 s/ u) }' w$ ? var dots = document.getElementsByClassName("dot");) Q; H6 W8 o. x c7 i
if (n > slides.length) {slideIndex = 1} " v- E! r0 X7 [7 g, B G
if (n < 1) {slideIndex = slides.length}1 x5 R1 a3 C$ E6 l% {2 ] v" Q$ P
for (i = 0; i < slides.length; i++) {( U: W3 n4 L) ~
slides.style.display = "none";
$ a/ s* b: W7 i; ]' ` }2 f# ]4 z9 P( H* m! W
for (i = 0; i < dots.length; i++) {
) _0 N, g; q# g; ~& ~7 R- _ dots.className = dots.className.replace(" active", "");) m8 D' [# a6 p0 G: Y
}
& `% W4 m' w% t+ M) q% T slides[slideIndex-1].style.display = "block"; # ?& G3 v6 ^( F5 W5 ?; @( W
dots[slideIndex-1].className += " active";
1 K! G- ?$ o' I& _9 A' w. Z}
) B+ R# I6 O* u</script>
9 U# E) o, l3 S" J
4 T" G5 R1 E- B</body>& q2 _( s3 P" B z7 O0 {" A7 g* `
</html>
0 _; r! A; o* z3 y% z. U' y |
|