TA的每日心情 | 开心 2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑
0 i: H1 `; y7 R% p; Q }8 Y可以考慮用這個7 E0 D- i0 R0 U( |; u+ f: \
照著套用應該是 OK 的0 D; m! t/ a/ k/ A4 Q% h
" j6 w: B; x: A* \
https://www.w3schools.com/howto/ ... tryhow_js_slideshow" c" o# ?6 i& r( l! ~2 m
; Y8 y/ A5 x7 k3 O
7 D, d9 A! c8 @- Z3 P
# b3 k2 j* {: w: ^( \& q<!DOCTYPE html>
- w) H: ?* j' M& M+ v( `<html>0 D* Z+ x* S4 }& E U
<head>
* x5 v! f& P4 H5 \<meta name="viewport" content="width=device-width, initial-scale=1">0 w! T7 w: G" X8 z
<style>' Q- a- t1 [. x U
* {box-sizing: border-box}
. V d0 ^$ I5 X1 i( h& Obody {font-family: Verdana, sans-serif; margin:0}' r( O- I0 X) N5 W! z0 T
.mySlides {display: none}5 v' n" ^2 H* p8 Y
img {vertical-align: middle;}
! V8 g- _- ]' ?5 n$ i$ |3 I0 f8 z0 b! d, B0 U' F" {$ D
/* Slideshow container */
7 g( o" [2 r+ S$ n.slideshow-container {' u+ I3 o$ U# y; e; a6 r& U
max-width: 1000px;' D Y. |9 {6 I B& H3 J& m9 a
position: relative;
( i. c! O& K7 u- ?* f: p! ~ margin: auto;7 [ H, _* o( I
}4 `9 k I4 Q8 @7 f
0 K1 b. M0 B2 B, _& R ~/* Next & previous buttons */
) Q# ^' u! O/ n) b; J.prev, .next {
" e2 S* p+ U9 r' t4 a. i cursor: pointer;' F, a/ ^; M, h( ? u8 s* \
position: absolute;( k) W9 a4 ?* Y; L3 c7 C
top: 50%;, ^2 ]9 H9 i0 b& Q# @) J* q
width: auto;
; O! l8 ~. j$ m( h: T4 ?- l padding: 16px;) S+ x6 x$ |: A& f! {9 M, W
margin-top: -22px;
. s0 C0 u1 K5 u; p8 q. e# l color: white;
; V5 q$ P9 K7 R6 ^0 k* e# x font-weight: bold;4 V* B4 @& R- W D& Q6 ^5 o0 i; E
font-size: 18px;, h8 X& \" X4 ?2 A* D1 L6 r- s# T! e
transition: 0.6s ease;
/ m8 Y: c& n5 t1 p0 r' h4 W; H; B border-radius: 0 3px 3px 0;
, w: L4 Q' h9 F- E0 C' v user-select: none;% b) @; Y' N& t
}
5 k( U+ Y. q2 g7 N3 S9 M+ Y) {# Y) S+ V: b4 g
/* Position the "next button" to the right */% D: I& ~/ h" Y1 }+ c( T n
.next {9 S4 u7 t: [& T5 }8 g4 K
right: 0;
( n# Y. W/ d& i7 x: Z- [& ` border-radius: 3px 0 0 3px;
( E- W. X7 E& L$ [+ r! o) F}% ~7 r8 d5 @! @! P
x" O( f2 Y# n& [
/* On hover, add a black background color with a little bit see-through */9 x" y. }. w) W4 W' [
.prev:hover, .next:hover {- A) l% f! e/ L6 U! Z( o! ]5 g% c- z D
background-color: rgba(0,0,0,0.8);
: E/ D% K p' k2 n- J}
" o7 f1 Y( d' `% D7 w) w/ E7 p9 X! k- x
/* Caption text */2 Q1 Q8 N D# [; g# c- u
.text {8 W' x: X, ], o! O5 D+ n: l
color: #f2f2f2;
7 v. ]4 ~1 }, }, _! b4 V/ D font-size: 15px;; _! k4 X0 v4 n4 S, J# V+ T
padding: 8px 12px;
+ r. ^; t. d# U position: absolute;, q) p8 e9 Z: t6 M% F
bottom: 8px;
. |! Y, i8 h, \4 a# | width: 100%;- u4 ~* m/ D0 h: |+ N+ ?
text-align: center;
& c) p& a( _) d# e}4 L& _! m& t8 H% r+ S
1 `5 E" j, N7 `' M2 W" U
/* Number text (1/3 etc) */( c! z' }7 D* b$ n
.numbertext {
/ D! K7 c8 x7 y6 \ color: #f2f2f2;
7 R# b- i3 N' I6 g1 @ font-size: 12px;
4 ] `5 n( }( D3 s! ]" I padding: 8px 12px;
5 a& {- a% A4 i5 R) G position: absolute;
* [# u* ^6 e1 O# r# n* ~ top: 0;
I2 ^; W/ b( | m; j( ~2 x0 R5 V}
u ^$ M7 W2 d
7 v: l3 Z# ~. r4 u/* The dots/bullets/indicators */
' m* k& k' h b; s) z" n.dot {* u" n" R: t; o2 N& C- U
cursor: pointer;2 w5 k& e* ^) K5 [1 V H$ r! X
height: 15px;
- G% |& `7 e8 H8 F width: 15px;
3 J0 @) f: g! B8 _2 E5 F0 k2 }3 O6 I margin: 0 2px;% `( y3 |5 U$ _6 Q; a" ^" w4 w
background-color: #bbb;
& R0 j7 o0 v* g% Q+ R& ?% {; Y border-radius: 50%;& l9 Y/ h/ A S7 @' L% ]
display: inline-block;# i/ a0 P# }3 B# c% a
transition: background-color 0.6s ease;( N0 M3 @$ l, Q4 Q+ {3 R6 z+ ?
}) H1 ~( k& M6 P( T9 n. }5 K
1 ~0 K y8 o$ z6 `.active, .dot:hover {# f: t9 S3 E' K3 w+ S0 ^# N# |' ]
background-color: #717171;# @0 \9 M7 p+ D. Z
}& F- J; ^/ O( t; Z. O, B
4 I4 ^" U& ]- k5 b
/* Fading animation */; F! S+ M1 E- d
.fade {
. f& |. B" s5 `7 C; r -webkit-animation-name: fade;
* v! _: E2 z' n3 F -webkit-animation-duration: 1.5s;
+ ^; m. m% A: b/ M) n3 o; G9 k animation-name: fade; w, V2 `2 @% d) n
animation-duration: 1.5s;
3 W# i/ u/ F1 l# B4 S# O) n, ~}
. g j3 C, K2 v# z
5 D6 @9 ?3 Z% y@-webkit-keyframes fade {
- r+ D9 O1 o, K i from {opacity: .4}
: \, a0 i, n* _( Y0 ~ to {opacity: 1}
- k4 o" i; `0 J8 K( x0 v; [6 K}
& S+ [5 A0 G, a
4 M7 s2 l; d4 }. y( L8 Z: v@keyframes fade {
& @2 [* A+ S: T1 L, H3 z# R from {opacity: .4} ' A) I, f0 A) Y5 u* N
to {opacity: 1}" H7 G; j+ T4 t2 p% B
}
0 K$ }6 v/ L" J+ J
6 O, h/ k/ T) y( q/* On smaller screens, decrease text size */
. F3 v7 S; j5 r8 ~ T0 n" H/ G5 j@media only screen and (max-width: 300px) {
7 y$ M8 Q) H2 A5 J .prev, .next,.text {font-size: 11px}! E8 z9 R) z% r) [! S
}! p2 r. I2 l* T6 N: Y; d: r& h' [
</style>
* @! B" ^& V3 `" G! w3 ?1 j7 \</head>
* j- E; A6 I8 }; V<body> Q8 B! t. [5 ^% F7 f
# X2 i) O4 v5 E. j- T) }1 ^<div class="slideshow-container">
, I9 Y6 p' I! E0 G# |& |. P2 C
( U: A! f8 m. _" t% o<div class="mySlides fade"># A B8 r' o! r- o K
<div class="numbertext">1 / 3</div>
E, G b/ y t+ `) P k+ b1 s <img src="img_nature_wide.jpg" style="width:100%">+ j6 L8 G2 X; M3 Z& n) D, Y
<div class="text">Caption Text</div>
' f+ O# n) N0 w6 |) z& Z. g% o4 j</div>9 G, f1 J1 {) x q2 c' x
- Q% W# G; a2 h/ s8 Z
<div class="mySlides fade">9 p& d$ h) p, V! g* {) Y+ j7 H$ q
<div class="numbertext">2 / 3</div>
/ ~% s& _# _& X, u$ x m" E <img src="img_snow_wide.jpg" style="width:100%">
+ ^5 Y, a7 \/ y% _% Y <div class="text">Caption Two</div>
Z& y) I8 ^5 X; X' \* W% D</div>- Y5 y1 a; R5 @9 O# J
, G) F4 X" l& S8 X9 W4 ?* T<div class="mySlides fade">
* _: _8 }7 z; X9 e7 a( p* w7 ~ ? <div class="numbertext">3 / 3</div>
8 D% O% M0 J- E' r* H9 j8 a" o- t <img src="img_mountains_wide.jpg" style="width:100%">
1 ^( j1 v+ F+ T v$ X' j8 Z <div class="text">Caption Three</div>
& o' i( _6 H3 X. W5 E</div>9 r3 N: o7 D5 j6 \7 V, g( N3 C
1 t0 Q9 Y& f1 w: W7 u, T ~' U
<a class="prev">❮</a>
2 F& P" O. b+ j: d! K3 [+ e+ I<a class="next">❯</a>
, ^5 u7 W$ ~9 H) N) H
* y+ w4 T5 X! k. ]: j</div>; S+ ?0 c3 k0 F6 |* }0 [2 ?
<br>
; b0 ?' i' ? u; }! ^$ l6 N% Q: Z
6 V5 N$ x: r" p0 |" b7 {<div style="text-align:center">
/ w8 b- m0 r& _0 G <span class="dot"></span> * L D& H4 [! O4 G$ W
<span class="dot"></span> - a0 x; s/ E- Z3 [
<span class="dot"></span>
: x( @; m0 I, D0 W/ F</div>
7 U, v( _* ], s* K3 @* X5 C/ x$ e
* I" x* I0 b, a3 j r: y<script>& {. ^- ]' `& X" }
var slideIndex = 1;8 w# N1 b9 u; F4 D$ @2 e( v' `2 ]
showSlides(slideIndex);
8 Y0 m; h" o5 l* w) E
# g5 u$ O# F7 Y4 yfunction plusSlides(n) {6 i! Q9 s8 i: E% f, w \1 m3 i
showSlides(slideIndex += n);. V3 `( N7 m) A
}; ?1 e0 K& ?2 P0 f% a
2 x% S9 F8 a% v o
function currentSlide(n) {
% [. z) ~& v/ g3 C3 L U7 h2 G) U7 f9 O showSlides(slideIndex = n);5 C* @( [* K' F$ u& }+ }
}- H) \) c9 x8 H$ C: H4 I( E& k
7 M. ~4 _2 f8 c
function showSlides(n) {
0 a2 L! d k# z9 R8 H var i;
5 L! A n Y. o9 x var slides = document.getElementsByClassName("mySlides");1 |- }. T0 X* ] K" k
var dots = document.getElementsByClassName("dot");% D1 _* i$ E0 N6 C& {8 Z
if (n > slides.length) {slideIndex = 1} . L9 t: j# H# q! g- b
if (n < 1) {slideIndex = slides.length}7 D! T, U4 ^7 R7 I# R
for (i = 0; i < slides.length; i++) {9 i0 R3 h0 g9 n* m9 c
slides.style.display = "none"; 6 O6 k* a2 k) M A: [
}
# h& e0 q; R" @5 O0 _+ }2 q9 |, i) t for (i = 0; i < dots.length; i++) {
+ b7 `" V8 s6 m6 `; v% P' s! ` dots.className = dots.className.replace(" active", "");
, R' ^) w0 q& B }1 W: t7 V3 a) F% k
slides[slideIndex-1].style.display = "block";
9 I0 G0 M* F. k* B. V& c) I) k% z1 g' b dots[slideIndex-1].className += " active";
[+ m* K+ o- G. H( k. W/ d}
6 |1 E: c7 n7 Q3 X7 x</script>0 u# B" j9 i0 Z Y
8 w) @# s" o/ b( {8 g. i0 y$ s A
</body>8 H+ U, X* C2 A* N. B) M: e
</html> , u [( @ s5 d
|
|