TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑
1 R. x! W# s& b: K4 v: j- @! l$ {可以考慮用這個& e# b. }3 m4 t3 ~
照著套用應該是 OK 的
0 X4 M6 `) h& N( z7 c- A% e8 `% J! O7 S) N
https://www.w3schools.com/howto/ ... tryhow_js_slideshow# }+ U' i2 z7 i7 }6 Y" B
# U/ R% e) _' n1 C% U" a 8 b3 J1 S, R Z: t- @& p
4 G- H0 `; i" L3 h<!DOCTYPE html>
! z" z0 N D4 s* B }<html>
, _: b& @- v: [% p' ?<head>
3 [' }( f/ k2 A! g' ^<meta name="viewport" content="width=device-width, initial-scale=1">5 i0 s' m3 m0 c: l3 G. z
<style>
* w5 A7 w0 A8 M( Z5 S* {box-sizing: border-box}
: e& t6 \* i7 sbody {font-family: Verdana, sans-serif; margin:0}6 Z i" `1 m# e1 s
.mySlides {display: none}# g$ ?4 K7 ^* v6 N& {* f
img {vertical-align: middle;}
: p+ t: t/ c9 U7 P5 ^+ @0 h4 n' }/ f( }& o) J7 ]; f
/* Slideshow container */
( z. ?" g# A4 O' {' c# W5 L. O# s- q3 G.slideshow-container {
7 ^# m- J$ \. U) Y' t max-width: 1000px;* A1 }; i n, v! h
position: relative;' I/ p& p8 A/ t6 p- X
margin: auto;( C+ {$ i9 l# J0 N$ n. ]
}
/ n5 b! F' G& A+ S% [' G3 Z
2 f5 s' [ m+ k N6 r5 E4 p. @+ K3 [/* Next & previous buttons */1 W1 W* K `8 m) ^) k" Z4 d+ f9 u; t
.prev, .next {) V; I4 ^" R" S( c5 K8 p- R- s
cursor: pointer; S( d. }- F: j5 I
position: absolute;
9 X# W$ ]* G" O5 H- M! V. C top: 50%;
: ^; V; h+ t. Z' U, N; f width: auto;
$ p2 |! u: Z, i& a3 M4 `! s padding: 16px;+ k+ _; o' \5 ~
margin-top: -22px;' g9 |2 u& N6 T6 s
color: white;
8 W( W! [7 U' R9 r2 J2 i: K font-weight: bold;
! E* f' x# n/ Z, I* h& B, f font-size: 18px;5 D$ b; h: @" s- z, {6 h/ ~
transition: 0.6s ease;
. t; d9 G# [3 m) w5 r3 H border-radius: 0 3px 3px 0;% V! z/ f+ X+ T- Q0 Z& L9 q0 M: L
user-select: none;0 y5 k5 ~; q$ Q4 p
}, s; z, o" B. J
* e4 V F1 h g
/* Position the "next button" to the right */
& M* _, O2 Y5 M$ M9 t/ l.next {
3 `& ]+ t# X' p: W right: 0;
" g- _8 t( N- d6 V border-radius: 3px 0 0 3px;
. [1 T* V; Y. `9 S" ]}& ?2 H+ B2 Z4 K6 D3 l7 Y8 [
( o7 F, f1 { k1 n* }/* On hover, add a black background color with a little bit see-through */
, {$ S5 T; y7 Y2 C/ n2 ^- }' M8 _$ t.prev:hover, .next:hover {4 L' z5 \; e4 q% {3 D
background-color: rgba(0,0,0,0.8);2 c# K) P2 i$ j& C$ o) x
}
; T4 A, ^+ G2 _ S( W, N9 D' t7 J% S- _: s) q1 Y% Z# b4 T- t. p$ S
/* Caption text */
. W B. G" ]% R+ r! w.text {
; h0 d. y! C Y$ g- `- x& E color: #f2f2f2; I5 ~" i8 F# X2 x
font-size: 15px;
) }& H5 ~* g8 Z3 l padding: 8px 12px;1 b, {9 k# g: `2 g! D; }: _( M
position: absolute;/ x9 K# t! {1 ]! _$ X) }
bottom: 8px;
% m w' \/ k! K; V7 p$ g width: 100%;
9 o) D4 F7 h) r+ r0 z+ J text-align: center;4 T* P. W' M: R8 i* t$ |
}
' w5 q' d7 d4 X0 R' y6 K4 f. G; X3 t+ j, i
/* Number text (1/3 etc) */
. V) N; I( i/ t! t2 g.numbertext {& r- Q5 \& K, X1 [" N
color: #f2f2f2;/ F$ t' C; w K+ v( @
font-size: 12px;8 o, D4 {; e @! b! F" P; p, Z0 Q
padding: 8px 12px;$ ]6 b: n h# ~; O
position: absolute;
( d( ^% e. D# {/ ?( f top: 0;1 @3 @& u) }1 S- U ], k, j
}8 \+ g$ g; ^/ l, [4 ~
! _- d0 Y% O* T" L- Q( y
/* The dots/bullets/indicators */9 \; |1 f8 | q2 c! o" J
.dot {
# B; o/ z1 F& g" U" [ cursor: pointer;
' h- J- h* V; q9 I/ G height: 15px;- `, a _9 Y2 q6 G" C
width: 15px;* l d D5 J5 t V+ j
margin: 0 2px;' u8 b; ^; w; J m) v9 q4 j9 P2 D
background-color: #bbb;+ w4 a6 f8 [3 S( ?6 P1 f7 ]
border-radius: 50%;7 }) H: I- @( l* d6 w) {
display: inline-block;
4 v; P7 Z5 N. S transition: background-color 0.6s ease;* Z! ]9 P6 W( n" M# E1 U; G
}6 x3 L5 P* L: L- i: D8 L- P7 b5 P
6 `: m# `3 |! g* Z
.active, .dot:hover {0 h% i7 M1 L1 N) Q! Q$ |8 a
background-color: #717171;3 n( z0 C: g9 }; {( b& w
}
, ~. {! f0 [# I4 }) |" Y h# L4 G& w- a7 E [" G
/* Fading animation */
2 f' {* ?4 o: ].fade {% D8 F F. D7 D
-webkit-animation-name: fade;3 p% s4 B8 ]: M v7 X6 o' T4 M
-webkit-animation-duration: 1.5s;2 w7 Q0 f5 G4 R7 c1 U( x: g
animation-name: fade;3 E1 p( s, k/ y% F
animation-duration: 1.5s;7 e# g6 E1 r0 w* ~
}
; E! K8 ^! o- P/ l' T( k$ O& F: o Z6 y) u, Q) r3 k
@-webkit-keyframes fade {! k$ W( K5 P! T. F
from {opacity: .4}
; f, B$ g0 E% B# D9 ^ to {opacity: 1}
% J6 q( p9 K' G5 c/ Q}
. }# D, @9 @) `5 D- O$ b) k; ?' Z" _; l. T2 I- e0 T
@keyframes fade {
4 q/ _: `% s" z6 W+ d1 L% H5 t from {opacity: .4}
% |" L# Z; [! y. I to {opacity: 1}5 }' ~2 G2 c! f1 ?
}9 K7 X* K. I# c( G7 z) g
7 N4 }5 C& A. }# l- ^, v' Z; H4 I
/* On smaller screens, decrease text size */8 a6 w% X$ k1 m/ L$ [! d# q
@media only screen and (max-width: 300px) {
& E% | H; I' b; [& t0 }- \ .prev, .next,.text {font-size: 11px}3 Y3 N1 \2 G( _9 L
}
1 h! r2 q6 F2 p# _, Z) l</style>$ \2 L7 v8 @1 ?+ `7 w
</head>+ }9 @' ~, G6 Y! L* `9 |, w6 V
<body>! [1 R( ?. N* ]) Q0 ~
, E. N8 d, f3 f$ z: U. [<div class="slideshow-container">7 k1 b8 @3 F6 c; Z4 |) H: V
& i5 Z# @( N4 v0 Z<div class="mySlides fade">
# v9 C6 e" O3 M6 s& E- [! K) ] <div class="numbertext">1 / 3</div>
; Z8 H7 c3 ^1 g- r- c2 A/ B8 E1 \ <img src="img_nature_wide.jpg" style="width:100%">( O7 _9 k) R# X. ?: [) l6 X u, r
<div class="text">Caption Text</div>
9 y6 D! ?$ ?; k4 T3 R/ r2 r. y</div>
, w+ e3 m4 |7 y$ c, T2 N Y/ }3 r+ T; e) X$ d9 @
<div class="mySlides fade"> i- H5 ?/ ~) l7 Y# x" |2 W
<div class="numbertext">2 / 3</div>2 A' @( G7 S& }4 l& T/ y$ u2 c
<img src="img_snow_wide.jpg" style="width:100%">$ a* c3 i& z8 A8 Y
<div class="text">Caption Two</div>" C6 y, q9 J$ j, J
</div>
2 R; O7 Z0 T: u c+ T
+ Q0 a8 g7 c. y6 h4 P<div class="mySlides fade">; _. Y! h9 t$ R5 s
<div class="numbertext">3 / 3</div>
c7 a! l3 B" A N6 ? <img src="img_mountains_wide.jpg" style="width:100%">) y: y e- D5 h& {. M
<div class="text">Caption Three</div>
8 a* c) T' H G* ]3 K. C! Y</div>
' a4 q5 s3 `2 N. t% f' f
" {' f+ c) R8 G' Z% O5 l<a class="prev">❮</a>
5 W* { D+ w7 i I% j w5 `<a class="next">❯</a>
) z' x* r! s: E" E4 s: k
; e+ d% I) P4 u4 e% h</div>! F% m1 I# s, k$ P
<br>( H A8 E( ]- g" V/ l" ~
3 R$ }" M w6 V& u<div style="text-align:center">
" Y/ h/ M# `( E! B v( b W <span class="dot"></span>
% M7 ^; S6 z' f/ O) @% y0 m0 e <span class="dot"></span>
$ w; E+ f# O( m/ J! n, M) h8 | <span class="dot"></span>
7 i' q( n1 B( C, `* z* D9 N- ]</div>
Q) V0 Q9 o. S) w4 x( \3 A5 a% V9 i& @- `# {
<script>1 r N" z" o% r. k
var slideIndex = 1;
+ S! K6 o8 e. G7 a: N1 Z wshowSlides(slideIndex);
1 X# {$ v1 B l5 Y+ K/ h9 y. I M; g
, a. r4 Y1 u6 ]' Pfunction plusSlides(n) {
1 W+ Y6 U. j8 o! w+ I8 \" { showSlides(slideIndex += n);4 ?# T# M. `) }' ~
}* m( V0 t' u# i0 ?- y3 s
! H/ j, ^$ f* N9 g( Kfunction currentSlide(n) {3 m: H0 z2 s6 H. Z; H2 q# q( e( i
showSlides(slideIndex = n);
1 G/ J! L) N1 _% ?}" U) P; u3 g& j+ Q6 Z# c
+ P# R% n3 y4 C, t- U$ N4 _3 ffunction showSlides(n) {( f5 P9 {0 d- x: k( _& p8 w
var i;: b! J# ~+ L% y4 `
var slides = document.getElementsByClassName("mySlides");
8 N+ C9 M; |' ^7 X3 Q5 d* @6 i var dots = document.getElementsByClassName("dot");& r) U" x+ z" S; k. a( l. x
if (n > slides.length) {slideIndex = 1} ) I/ w c5 @6 |+ g1 X) }6 [
if (n < 1) {slideIndex = slides.length}
7 k) s7 X% h& `$ w, {5 R$ E) z for (i = 0; i < slides.length; i++) {5 n7 P/ B1 t: X6 D( j; g: j9 I5 h
slides.style.display = "none";
% s/ ^' G0 y% ]7 R3 p }+ E4 e2 ~3 ?& @4 J) }' u
for (i = 0; i < dots.length; i++) {
2 i# d4 C0 a5 F. a7 X( S$ J5 f dots.className = dots.className.replace(" active", "");
3 D9 S# m# Z$ ]( P }9 c8 D) P( J' v% ~3 B2 j2 a& `- s
slides[slideIndex-1].style.display = "block";
) v' y& u" T# j' x# h6 \ dots[slideIndex-1].className += " active";
2 {7 r3 V: c2 k8 j4 f+ t+ r5 a}/ Y# J$ U3 j: C2 K
</script>
3 o# ^* h$ e2 ^- X4 X, z7 l/ t* p+ R, M+ C( s
</body>
7 s! J. E" f1 [</html>
/ u; c# y# f( J7 D- `; V0 R |
|
楼主: starmars
楼主
