TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑
* I# d) b+ c! l可以考慮用這個: u( l! r% \! t4 s
照著套用應該是 OK 的/ j0 ^- h I4 a* h
3 U) V5 S# M6 J
https://www.w3schools.com/howto/ ... tryhow_js_slideshow; G- C& D- S9 R/ x- ]+ E3 m
' c/ X' C# b( \( p
, e# B7 \* q2 T1 p0 C; A. b* b9 B4 Q/ Q* g3 [7 X
<!DOCTYPE html>( c" y( Y9 \! Y* ]
<html>8 `1 _" y; G9 ]4 A
<head>& y* t) \7 z4 {1 @ |6 P% Y
<meta name="viewport" content="width=device-width, initial-scale=1">% ^- y5 Z4 G2 Y: E$ u8 B
<style>
& y; E" {8 J9 N ] \) t) S" e* {box-sizing: border-box}+ ^, ~! @' E- ]3 {! y$ H
body {font-family: Verdana, sans-serif; margin:0}
7 R1 g. d @4 T3 h/ E& z.mySlides {display: none}
8 P0 {* s9 O2 b' v3 Himg {vertical-align: middle;}
! l5 f0 P9 v6 A' B( C: v
V `( S6 \0 s8 s; E$ f' |/* Slideshow container */
5 H, R7 c: t3 Q; b# f+ j2 V `.slideshow-container {, n. a4 B- R" S' x1 ?) t* n( N
max-width: 1000px;
2 w& W2 l- I0 s5 B- ~ position: relative;, X0 n; s& E- c( O. O
margin: auto;% p0 E1 d: a3 e) _
}
% T" }7 b1 k( {1 T% W
3 ~ Q- `7 k/ i- B% o: i( [1 b0 G/* Next & previous buttons */8 ], u- `8 F$ b7 o u0 N$ |. J
.prev, .next {; @5 u9 c; x+ O$ Y1 n: a& p
cursor: pointer;
/ Q, g6 ~" r, t: Q$ v! A, p position: absolute;. H, R1 H" |1 x H, g# U
top: 50%;( Z$ w) b) ?0 [2 o. m/ I" e
width: auto;
9 m. L" W/ t, \ padding: 16px;
. X, K4 M/ x/ f9 T0 x+ N margin-top: -22px;
6 `# q9 [2 ~: J4 I1 C# W color: white;
( A* P6 ~5 G. E) k6 v! E7 W5 n font-weight: bold;" |5 B* |( @0 v5 c7 e& U
font-size: 18px;4 |+ y( ?2 x. }* V1 m/ q3 L
transition: 0.6s ease;8 G' u) x* f: p4 B4 F6 T+ c' n3 {% d
border-radius: 0 3px 3px 0;
/ B3 y! K8 L. s5 N* k8 | user-select: none;3 w* H3 g3 ]1 J8 N% T( a
}
7 S ^1 D& `+ \$ i9 F% p4 u: ?1 ^% B) l& {. M
/* Position the "next button" to the right */
& ?9 H0 [5 S) }" [.next {, \8 B& P8 K+ x$ z8 e! z
right: 0;
7 D! a: X/ E. m4 l1 b( `" f+ @) p border-radius: 3px 0 0 3px;
2 c0 G9 Y# J: J6 g}0 K% _4 D, b% Y# g6 a3 Z
% C$ j5 S% d# b) G p
/* On hover, add a black background color with a little bit see-through */
D8 a0 r/ M2 X+ N- ^1 Y, y.prev:hover, .next:hover {7 ^$ [6 ^6 f; W" r. _
background-color: rgba(0,0,0,0.8);- w/ \& W' n3 H; ~. e7 K8 f( s) e
}$ q- m' e" j: j$ n% [: I9 G% l
1 k" K( H: f# s: ~/* Caption text */
0 a- Q% U& ~, f.text {2 \6 S1 X+ X3 `& M6 {4 N! V! v
color: #f2f2f2;( @& ?# A# \5 C( V' ?
font-size: 15px;
2 H! W n& _! j& r padding: 8px 12px;1 I: x/ `3 _4 \2 ?# }! S
position: absolute;% } K- |% \9 ?2 L3 Q0 W5 V' R0 d
bottom: 8px;* T* K0 S6 K9 s5 m: n
width: 100%;
4 F4 C, n' ~, q% H) O3 f text-align: center;$ b0 a+ f5 _% j/ s% m2 G) u. S
}; U6 h- n( U& c9 Q3 }$ M7 k) D
6 x; w3 P" ~/ h3 g6 ]
/* Number text (1/3 etc) */: J1 O* g0 Q. ^0 A9 C8 p; n6 w" `
.numbertext {
9 R+ a9 p! A9 S' R$ O* r1 B color: #f2f2f2;
9 D1 n5 D3 ]" A/ t$ `! D font-size: 12px;* T9 G- w) w: P( R1 c
padding: 8px 12px;
' f1 X+ d0 Q1 |6 V( S8 M! _& ] position: absolute;; ?' f' o2 ^: [4 y5 ^ ]# U
top: 0;8 Q- Y' a- {. _7 J9 @( r, a
}* e' ~/ }4 ~$ B$ u6 [
3 t4 C3 ~8 t) B. o3 }
/* The dots/bullets/indicators */+ V2 n) `3 g2 ]* ]# s
.dot {
8 @ b0 D8 [: b3 s# T% x) J a cursor: pointer;- ^$ ]5 v$ ~& j
height: 15px;: J9 O/ \0 c0 l/ h$ C
width: 15px;; h, E0 a( a6 Z% |6 V; w
margin: 0 2px;
" ?" e0 H3 O4 t" C: c* P background-color: #bbb;
^; N4 C& G+ l3 j0 |4 }7 e% W border-radius: 50%;) j( Q4 Z5 `6 |2 q3 _! V$ V
display: inline-block;
% g% p7 H1 d2 u) t5 N/ e+ m& D transition: background-color 0.6s ease;
9 z, R+ V% m- \0 Q" j3 I}
9 g5 d! Y P' k f4 r2 E1 I5 N
& G R4 h1 i9 m1 I.active, .dot:hover {
( S3 z- c4 w, u7 W% ?3 O background-color: #717171;" `" a t2 K7 l. M: N
}
~- F, ~7 V. A9 V9 v- B5 w& p6 Z6 N5 n) H
/* Fading animation */
! ^$ k, y% y7 l. I" X' C.fade {* N5 M1 |+ o! @) R
-webkit-animation-name: fade;! F! i- i1 U8 t# j9 X9 i4 n" T/ r
-webkit-animation-duration: 1.5s;
! b5 K9 O! _8 O5 L3 Z0 k; K) z1 c animation-name: fade;1 |5 I% s9 a8 w# p4 a
animation-duration: 1.5s;( k, D$ y% x9 k* \7 o
}! Y: P$ R# @, A' v' g+ o
Q; j/ V) ?2 L3 ^/ v! K+ H+ h: F@-webkit-keyframes fade {7 d; L, T1 ^+ [* t
from {opacity: .4}
1 u5 x# U3 x0 |5 ]' V$ |1 P2 m% m2 V to {opacity: 1}4 q: x9 z/ i k
}3 l2 ]' F$ H, e8 b" @3 {4 \
5 l1 {: K( {6 }0 s
@keyframes fade {$ o4 H) D! X6 h2 _
from {opacity: .4} % T+ A# t; u' Z
to {opacity: 1}1 z9 @- p; H l' [5 m8 r! r( ^
}2 i, R; x# @! O: y. h8 \- a& \: D
0 Y' s0 j9 e* N/ j. I6 [/* On smaller screens, decrease text size */7 \6 `- J) g* Z
@media only screen and (max-width: 300px) {
5 R& l, ] D. } .prev, .next,.text {font-size: 11px}
& F: Y+ x# _3 K" [}
) J7 n& C7 q% k( [8 ]% h</style>+ P' C' ~3 j% T
</head>' l1 O/ H2 S" A Z3 i! y) n
<body>8 f$ }, B( k. w1 d! x/ t
4 q* A+ E' ]! x! o& Y ~# ~5 f<div class="slideshow-container">
8 J F9 f! @8 p# C6 U y: b, n9 D B# l
<div class="mySlides fade">
* U9 z: R6 @! ~* L) D+ X/ g: f, f# f <div class="numbertext">1 / 3</div>
9 R3 ?4 U& H) N( P; L* a' h0 n$ T' A9 u$ O <img src="img_nature_wide.jpg" style="width:100%">4 _/ E" S/ a" l+ d& e; p
<div class="text">Caption Text</div>" d& [! y x4 z4 X& P4 h; G
</div>
7 z+ j. g4 M' e+ C; M/ ?4 C" x- | }! ~' E6 I& s
<div class="mySlides fade">
+ w4 ^( [$ Y3 W* L5 e6 ` <div class="numbertext">2 / 3</div>
: {# ^" D( a: Y" r1 ^7 [ <img src="img_snow_wide.jpg" style="width:100%">1 C* n+ ]) Z0 o" S$ J3 J7 r u: ?! I: G
<div class="text">Caption Two</div>
1 r& Q4 Q% V3 L- _5 ^</div>1 n) n0 H* `3 M8 \+ @- Z2 O( ?
- P! e! {1 v; T! n# s! @<div class="mySlides fade">8 }+ k" y, I% t8 o9 J
<div class="numbertext">3 / 3</div>
, @: m! _6 b5 l- \! p* z; Z! X8 ` <img src="img_mountains_wide.jpg" style="width:100%">
" D8 v" h( ~ d0 o2 B* j/ Y <div class="text">Caption Three</div>
) F5 F) p1 W8 P0 ?% i u</div>
, ~5 c2 c) Y! A* O, |9 ?: [3 b8 Z) ^' O" C- c# t
<a class="prev">❮</a>2 k+ I- U( K1 `0 A6 x
<a class="next">❯</a>& g {; c: D& ]3 D, h
3 H' H. _) `0 p6 ~% ~</div>! U8 E q( ^$ M
<br>
9 N6 u; \# f' ?
2 o$ ^6 C N4 _8 G# _( \<div style="text-align:center">
' B- ]2 z5 b' Y, f$ Q8 |6 i, | <span class="dot"></span>
- ~1 a9 _, i: k <span class="dot"></span>
+ }& M" g2 v' ? {5 E3 h <span class="dot"></span> ; g6 v8 D* s5 G# S9 A, {
</div>
: L. S& f: ]- ?. z* t# e3 i( K2 T5 s, P' D# s# d t
<script> p1 j, U+ S8 O! t
var slideIndex = 1;- ^( D# s; z) H+ w" q, ~2 |
showSlides(slideIndex);
+ a( ?% O& s* y2 ]6 m* m" V% x
function plusSlides(n) {/ i" O ]; V3 d4 y
showSlides(slideIndex += n);
, H0 P4 E6 u% H+ h}! _0 e5 g% B5 C
$ @( Y6 V7 U% z3 E6 yfunction currentSlide(n) {
# l" a) ?- b; o+ ~* O3 @) C, b8 _ showSlides(slideIndex = n);% \( x& E9 {/ E3 I/ n
}
4 y6 I- d/ l/ a- a5 b4 x z, w# R# h: J+ `/ _/ J8 T9 E/ t
function showSlides(n) {
' X3 y' T! H( s- Q var i;6 Y g" E: v: U' o. X7 z
var slides = document.getElementsByClassName("mySlides");& G3 {* Z4 O7 a- P1 a2 o ~0 }. M# _
var dots = document.getElementsByClassName("dot");
: M0 {! n0 A+ J4 V" X/ n if (n > slides.length) {slideIndex = 1}
$ p# ?* E! S! _* _( H: l% l) n if (n < 1) {slideIndex = slides.length}3 S' H$ D+ N& t* W
for (i = 0; i < slides.length; i++) {
" L' h( F( V& C8 a. B( r$ r slides.style.display = "none"; 0 y! y! _$ M) ]
}
5 ~ P: d% O* f7 O* i for (i = 0; i < dots.length; i++) {9 p% E2 [1 q- P6 `! X
dots.className = dots.className.replace(" active", "");* R3 {% k5 F$ h
}0 _; e; P; P, L7 p& q' W/ k
slides[slideIndex-1].style.display = "block";
?3 P# }' A# @ dots[slideIndex-1].className += " active";% p1 |6 t5 r% X) G( g( }9 v1 ?$ o
}1 X) x& d& J; E% Z+ q
</script>6 I; m9 d5 |/ b: r" l5 U) Z
- y$ J" t5 Q1 Y9 }3 s
</body> \5 [, E* A" _
</html>
0 b0 t- C. x0 S2 h* D |
|
楼主: starmars
楼主
