TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑
* Y, F( P" ~7 S- s7 m可以考慮用這個1 `! N# z8 P2 `% V
照著套用應該是 OK 的7 D# p8 l( {7 @( |: L! w
# {7 e5 q: X. {4 Ihttps://www.w3schools.com/howto/ ... tryhow_js_slideshow) x( p( U$ G' b8 n; M. U) ]7 ~
0 P' t h; j% O* g B- E* [
# y5 v! ^' U s W9 M! _: F: h% J0 `6 z1 Q: u- o& \' t
<!DOCTYPE html>
9 d8 R4 p3 W0 w0 X8 [+ `6 G2 O<html>
4 `; }" U. C1 n) T+ A: x<head>; a" K* }( \) ^% v5 G K
<meta name="viewport" content="width=device-width, initial-scale=1">
2 s s+ |6 e& P! l& r& |<style>
; @1 Y$ m$ Q0 E/ K* {box-sizing: border-box}8 h* E+ {6 ~$ X! g7 I# w
body {font-family: Verdana, sans-serif; margin:0}
8 u* j/ r4 M, M- Y n+ d9 ~.mySlides {display: none}' w- t, K! W0 ], l
img {vertical-align: middle;}- {+ U% S2 q/ t& X) ]1 V' y
3 v+ q0 z4 o+ Z, p* ?' p/* Slideshow container */
: s) C* `/ c- G3 s$ v; c2 Q.slideshow-container {7 {& v4 q2 C7 F& {/ F+ w) F
max-width: 1000px;
6 f# t7 L: K3 W. S+ `8 G, L position: relative;
) Z, `& i+ d# A- u: b6 @! `4 S margin: auto;
8 i& I8 i% X6 [9 Z% m! g$ x}, N2 o% B) S6 ]) S) f$ r/ _" o
" w: u) D: }( \; z0 m% Z
/* Next & previous buttons */ I* X% F5 E* Q5 Y. x4 I
.prev, .next {2 X: b3 b" X0 C# y
cursor: pointer;. N- r& O5 M2 Q( \/ ^: O5 q( n. x2 B
position: absolute;; v+ ]: g/ _! {6 ~
top: 50%;2 n4 h4 c# e1 y Z4 Q
width: auto;/ U% s7 R. u& z7 j3 \8 c, a4 D
padding: 16px;
1 C: C0 c& ^4 F9 X7 A/ H3 k margin-top: -22px;2 Q) A1 I' L" A- h: x
color: white;1 g/ j+ q6 \7 ~+ _" n( o
font-weight: bold;5 l9 N0 g: G/ |" b
font-size: 18px;
4 W/ c: X: O& k8 Q transition: 0.6s ease;
( [2 n; g: m9 ^2 h6 t, N9 u border-radius: 0 3px 3px 0;4 w: {0 k9 W( f9 G7 Q& G
user-select: none;
0 d+ ^* _ A0 }. k3 ~, E}" k( R. q9 r3 L4 C; I
9 E+ l- n. ?9 Z; M1 ^: }/* Position the "next button" to the right */
* u. {3 \4 z8 M8 t.next { Q, L3 H' q+ K$ s- }) Z3 O
right: 0;
( o7 w4 X2 ?+ _1 m7 f' a border-radius: 3px 0 0 3px;
3 P, g! r# D6 }}7 p" K8 c, c' z' }+ ?# J6 l% R2 o
& A% S. @% T9 Q
/* On hover, add a black background color with a little bit see-through */
# V: k3 W5 e6 _: K9 D.prev:hover, .next:hover {2 V0 P' h& [6 ?# a: Z
background-color: rgba(0,0,0,0.8);1 x8 ~2 ~+ g" g7 R) [3 c7 ~% q9 n
}
8 a& _* r2 y, F$ M7 F3 [3 `
& Z) q: q/ X1 c- j H- r3 ?8 v+ c/* Caption text */
' x" `% a, I. C' |+ K.text {
( y! e7 ~* E6 a color: #f2f2f2;
0 T8 X. D; @& F font-size: 15px;
9 S9 @$ A5 s/ f( c padding: 8px 12px;
$ E8 V' {6 [& t: t- y+ y position: absolute;
. M% Y6 l4 T4 y6 b5 c6 X bottom: 8px;
7 X4 N/ k6 m, d. p' j2 c2 S1 C width: 100%;# O' B) M, Q- H1 x, o6 ?
text-align: center;7 M" T" V+ }% S
}: j9 b7 Q5 e/ W2 S* i( M S0 ^
) i: c* J3 ^2 h/* Number text (1/3 etc) */
7 p' L" D+ X8 W: b, Y& t.numbertext {
: p0 u0 N9 R2 `9 t9 X/ U color: #f2f2f2;0 P0 S' D7 v3 Y3 j& Q4 m( j& |& d
font-size: 12px;& R+ q7 t- z( l1 |2 H" x: p3 F9 {
padding: 8px 12px;
( |, z" ^3 x) A7 N8 t. Q1 @- U position: absolute;: [# X- E6 `" Q7 r6 {
top: 0;/ U V, E8 e) P7 P5 }
}
( ]; x# P8 [* ]: m+ F5 b V
9 t7 H& V/ g, Q# i/* The dots/bullets/indicators */" d G' a& `* J2 J0 U
.dot {- f! g6 i5 ~( [+ p
cursor: pointer;
2 U i, g- I- H) S( Q/ I: U height: 15px;. z8 i4 V/ R* p2 o
width: 15px;" p4 R4 }4 ?- m# \$ s
margin: 0 2px;, y! K' p5 G2 f4 X v# N
background-color: #bbb;
, P3 ^0 d2 c- `/ I border-radius: 50%;$ j! q( s. @( J0 Y( X1 L% d
display: inline-block;
3 e( [; t& n/ Q1 u1 F* O8 _ transition: background-color 0.6s ease;
7 z, j6 K6 j; J N! d}
7 b7 ^, o' X, v+ [: p& {3 J7 T; E$ x: N! C
.active, .dot:hover {, g0 ~; x$ P* e0 ?, Q
background-color: #717171;! T) N, J9 s# h* j0 u9 d O
}
. G) f1 B! N/ V P2 C3 \. z' W
+ M- G3 _# L/ S/ T" v' [/* Fading animation */
' |/ `7 f+ K0 ?! r+ L.fade {
' D* R9 j1 h$ _/ [9 L M -webkit-animation-name: fade;) S7 n3 `( ^- D% _0 V2 P) G
-webkit-animation-duration: 1.5s;6 P$ O! u) ~* O$ |6 W
animation-name: fade;
! I' r& r6 W: v animation-duration: 1.5s;
& e8 U% K. Z5 e}0 i, t; v( O( i8 o9 z, b3 M* K3 g
' j% ]) @7 r3 I: x! o# `6 T! M7 o5 V" C
@-webkit-keyframes fade {
2 W. u* o/ p0 V* G- C5 S7 R/ K from {opacity: .4}
! b& e- |! _8 y to {opacity: 1}% |. n& O6 w; o5 G' q
}, v3 Z4 l0 H# Q; v
# T/ N' j! Y9 } v W
@keyframes fade {
+ K/ {/ k( y8 g! o2 S" a from {opacity: .4} , e* \3 i1 @4 a N% D* z
to {opacity: 1}5 n# _2 ?8 ^$ P& D( u. M9 f2 ^( i
}0 i* [' |7 P& ~; p0 j ~2 N
! {0 E7 y1 j8 ?/ E6 k) B9 ?. N/* On smaller screens, decrease text size */' A1 w5 R9 l7 ?7 s7 `. |
@media only screen and (max-width: 300px) {
) O" n4 X. c6 r$ @; S .prev, .next,.text {font-size: 11px}
/ s' t1 e& j- u* z& W}* y6 I- V9 |: S# k% I0 l
</style>
% D1 C/ O5 l8 F, T8 B* A</head>
0 H9 U0 T7 I6 Y; E5 V0 d u<body>$ r) O1 ?& Y, {% B4 j, ]
! _4 Q3 ~/ E: [7 k: E. c% z<div class="slideshow-container">
# h- e9 {4 W: O, N' D6 H% w2 D) A# p1 k. m2 T: e5 @- m8 Y! d: G6 H# H
<div class="mySlides fade">
" J4 j s2 q9 v- ^- ^" J/ ^ <div class="numbertext">1 / 3</div>
+ _, i% l0 s: a; r" z/ [, ^3 p <img src="img_nature_wide.jpg" style="width:100%">& L0 L9 t; _6 L4 R
<div class="text">Caption Text</div>
& S S4 W. T* G' C</div>
/ M$ h: z* X0 H/ ~) Z8 L7 c0 [6 A) K, }; Y
<div class="mySlides fade">
7 A& `+ R# E$ i7 K2 ]" Z. L' O% U- R <div class="numbertext">2 / 3</div>! k, q1 D v( Q1 x0 c0 \4 d) U* V
<img src="img_snow_wide.jpg" style="width:100%">* h. e7 C7 S6 D: S
<div class="text">Caption Two</div>& h: s1 f0 ?9 W: |; P a
</div>8 Z3 _) ~" E) _: ~
! ~, }( E/ G" h3 \
<div class="mySlides fade">! ~6 R! k7 w5 K3 }5 \
<div class="numbertext">3 / 3</div>+ n4 s0 X1 |, ^- V' q
<img src="img_mountains_wide.jpg" style="width:100%">
" G8 t& l& }& \3 Q <div class="text">Caption Three</div># Y. C8 @1 e+ e' c4 g( T
</div>) v! z! l U. P, Q5 X8 O. }7 v6 h
- d8 q! R; H: K: ?" e<a class="prev">❮</a>
( x0 k2 {; `1 b1 z<a class="next">❯</a>
" l0 Y6 w& l4 h# L* a; }% V2 x0 j. m* o& H& Q
</div>
9 |* g i+ _+ Q<br>! e1 ?( `8 k0 A. _- N+ i
7 I9 c) ^( u( m
<div style="text-align:center"> T( s- ~! J3 i: q1 G$ O% o% s' P4 V
<span class="dot"></span> " a7 H4 o- W3 j, D$ S- u) h
<span class="dot"></span>
: O$ \8 E _3 ^+ v! g+ k <span class="dot"></span> " Y) E. N( i0 u9 O( h0 s3 K- s
</div>- G8 \; x, i: b( D L P0 Q
, k9 S6 b+ L* p X Y$ t
<script>
$ \- {! N( H _+ V( T. ^% f5 {3 Lvar slideIndex = 1;& e- V# X O/ W6 O6 M& O) x1 T
showSlides(slideIndex);) E$ v3 B. u/ S4 S
# t) y- `5 D U! x* C( h f
function plusSlides(n) {9 X: b' ]; j J: N! R
showSlides(slideIndex += n);) H {4 t0 M6 i5 k) l; @3 [
}
/ P0 O7 k7 E1 a2 k0 g
0 y1 P% A0 U6 l. T- Ufunction currentSlide(n) {1 C1 k9 L4 E# ?$ C. `! a
showSlides(slideIndex = n);
' m# X: u: }+ K3 c}; n0 d; H. \, Z: |
' U6 j l1 m. u+ W
function showSlides(n) {
: z: C) Q; [, \+ t2 x var i;
7 [4 D2 V# w3 A1 a, ]( }: U var slides = document.getElementsByClassName("mySlides");, G5 ]6 {' c) q3 Q! k+ T
var dots = document.getElementsByClassName("dot");2 l/ c7 X% q; e9 f
if (n > slides.length) {slideIndex = 1} 6 X' D; E" |/ G( p* v5 c. N
if (n < 1) {slideIndex = slides.length}
1 n% v- o& i% m7 W6 _2 @5 j8 I for (i = 0; i < slides.length; i++) {- E; h9 D& H3 A, u6 b4 P( w
slides.style.display = "none";
9 L5 u( ~5 b5 s! ?; [ h }0 ~7 o0 V5 ?7 i! ?9 O
for (i = 0; i < dots.length; i++) {
2 i; M' l1 o: V) w7 P" z2 X! D$ m) n% f dots.className = dots.className.replace(" active", "");
2 f. [4 x; S: P1 T7 L9 N$ o }4 h- t9 z$ O) u
slides[slideIndex-1].style.display = "block";
; z7 c. `' x( G3 L; P1 Y; [ dots[slideIndex-1].className += " active";
; Y. N* P; @0 a5 N5 }6 X}' q' `9 r& z6 X$ P
</script>2 w" u) f, ?; {: J! N3 F
8 Z( T! f' g# c$ I. A L* O/ v) E" i
</body>; C& `( S( n6 t
</html>
6 T( [& _" m3 k" o g) F |
|
楼主: starmars
楼主
