TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑 ( ]+ B) j+ ~) R5 k1 d
可以考慮用這個8 H1 ? @; M# o1 C" M
照著套用應該是 OK 的$ Z6 i; C; S- h' B% C' G
8 x$ X4 b3 O& C$ z n3 J
https://www.w3schools.com/howto/ ... tryhow_js_slideshow2 U4 W2 G3 b! G
3 N6 U* }# f$ T x
: W. j* K5 o4 k2 M$ j% w! F+ }* n, ^. U
5 c2 q- V+ [ z1 a2 }<!DOCTYPE html>
3 h* H6 {# |& V* x+ Z7 h<html>
; t: R$ O! j1 }<head>
: P- j. P! _& M8 m& l1 |" ?0 z- I<meta name="viewport" content="width=device-width, initial-scale=1">* h+ W5 x6 f) _& v! d
<style>4 S3 N- P+ K2 U) R( n4 x. @$ j2 r
* {box-sizing: border-box}0 Q; y: [3 _6 t! P
body {font-family: Verdana, sans-serif; margin:0}
! ]1 J3 _# B0 d3 x% I6 R% C6 t.mySlides {display: none}; q$ H7 q7 z) \- k' Q& [/ x+ g
img {vertical-align: middle;}
2 K% S$ p# z, Z% ], ?
. u2 u3 T+ \' \8 p. \% u/ {/* Slideshow container */
, @0 h1 F3 n% j1 Z5 e.slideshow-container {$ x: I" M& n$ p0 A$ s y: A! u7 S
max-width: 1000px;
4 M2 K. _% U9 e2 S4 v position: relative;* z( @2 V; h) t9 m- i, t
margin: auto;
2 N' L8 L2 p' ^: J3 a& d5 k u) q- e}: n% p9 N# B; D% Y$ J* e" `
# r1 w7 m( s+ s' a( B4 X
/* Next & previous buttons */2 I" ^, g8 P f1 z' B6 |1 q+ o
.prev, .next {: r4 n% L2 _' [$ G8 a o
cursor: pointer;
2 q! m8 q( e E3 [ y position: absolute;6 B+ E% X( b% @ |& T' q
top: 50%;, o N- z$ Y* M" p* Y& v6 t
width: auto;
/ v* w+ o0 W$ j: \3 } padding: 16px;$ w6 O( H+ t4 ]9 f- n: K* s
margin-top: -22px;
- {+ F3 y) e. }) H9 ] color: white;
4 o' G- @& f/ K* q8 U font-weight: bold;
' W8 l: L% o, t" N: O font-size: 18px;
: {+ X6 D8 i& E) C3 N transition: 0.6s ease;& w# w" {) j5 q
border-radius: 0 3px 3px 0;
8 Q* {$ [& [0 c5 ~" `3 y1 r! K* M2 @ user-select: none;
A% y* M& `' l8 e}& f# e5 k# t, c0 ^, f( j: P
, g+ c6 V ~ Z# w# S& F/* Position the "next button" to the right */
% y. Z8 [1 E) g+ O( o/ \.next {" l/ `- ~" q6 [5 T6 e9 m
right: 0;- e8 p6 k+ V1 z4 w3 h' h& W
border-radius: 3px 0 0 3px;1 R) g0 l1 y1 M* _
} r% k# J7 F- P1 T3 t! k
* @7 P1 g* I, M/ D& @+ _$ V/* On hover, add a black background color with a little bit see-through */5 d, h, `" z$ C' O
.prev:hover, .next:hover {3 s0 G0 W- y( W3 r8 ]
background-color: rgba(0,0,0,0.8);
: h$ g- Y! v" s& j}/ ?9 M* F, i- S* ]3 n
0 X' X; V# L6 \7 G! @4 O% L/* Caption text */+ \) i5 B- `2 R# Y
.text {
e- s! x3 i+ T# r. t& R color: #f2f2f2;
: F1 o y2 H: l* ] font-size: 15px;9 T4 `# n8 c! o7 ~5 j5 j' p" V! W
padding: 8px 12px;* s3 S$ l) R2 F- Q$ X
position: absolute;, p: _9 D3 i' O' M5 {' {: d
bottom: 8px;4 E; F& k! N2 V( S. A
width: 100%;4 Q4 n* F) G% G' b+ d
text-align: center;; h' a9 K! S2 ^: E' l
}
% K3 @8 I& r6 R5 ]; x* E9 [- l, q+ m& C* V1 R' M
/* Number text (1/3 etc) */. F7 M* f- y' O7 {* P+ Y& h0 Z
.numbertext {
+ M. U" w% e e8 O+ D! U color: #f2f2f2;/ E8 U- r9 a5 s( {
font-size: 12px;# p" k- P! d5 g2 p/ t8 ]
padding: 8px 12px;
* y+ N }& r6 J/ s position: absolute;# k* c8 s6 d. Z T4 C: _
top: 0;# A/ V/ s3 _9 Z; U6 }
}
. o8 r* W- l; K( b7 W5 b& d s
' A$ L' K5 U% k/* The dots/bullets/indicators */
, B" n1 K! |5 l$ g.dot {
5 Q) \. ^7 c* i ~ cursor: pointer;
. L# h6 U: |1 V9 @ height: 15px;
# x {/ i; m6 ], y& z width: 15px;8 L7 {7 X( J" `9 X: {9 r& r
margin: 0 2px;) ^- ?, V8 g2 O8 K; f5 o8 n3 s
background-color: #bbb;- ~& }* O6 U$ o. \! r# E
border-radius: 50%;4 Y# g$ D" N" S5 R5 _
display: inline-block;% g1 Z3 X& S8 \; b& Z
transition: background-color 0.6s ease;2 F" w5 Y+ u; ?
}& b1 J# b- I4 ~9 g" V& y J. t
. ?2 Y' I5 H4 U! U; A.active, .dot:hover {
# x! a: U% q$ v0 K" M background-color: #717171;# a% p$ ]7 ~+ w& v% Z4 n
}( F7 A4 W( i( \+ B! x3 f' d/ z
1 @' E& X' v5 H/ x% I9 }2 R" V
/* Fading animation */% `1 H' i- q I- D0 i, x
.fade {/ l( V$ q1 U7 k7 z) ~$ {% I
-webkit-animation-name: fade;
' w+ t5 d. v- q9 k# ^ -webkit-animation-duration: 1.5s;
3 @7 U% ]) P5 S3 v! R6 W( d" F animation-name: fade;
& f0 V+ |3 l5 x2 p5 t: X9 h animation-duration: 1.5s;
0 y: A' \( e8 `3 a( |}
- D+ ~9 s a* u
9 i) q' e) ~6 W' h* e1 s@-webkit-keyframes fade {
5 j4 ~' n: l8 Q2 B" F' H( { from {opacity: .4} . Y8 e* w/ T8 d8 j( D
to {opacity: 1}
6 z% b* v# Q" |- _4 B}
0 c$ f1 _" O* A: C. J1 e% ?- q$ @0 r6 p- p0 b) O3 v
@keyframes fade {
( _ b1 b3 U% ~3 P from {opacity: .4} ! n; R: O# Z+ g2 e8 V3 t
to {opacity: 1}
- ~% Q! P2 F1 j: Z, w}
" u, L2 b: E+ G1 e% W; Z
~1 c; F0 g: q4 e/* On smaller screens, decrease text size */' Q2 U$ z1 A p- W; ~2 A. n( a2 x: u
@media only screen and (max-width: 300px) {/ L+ [ Z. R+ E5 c2 M0 |
.prev, .next,.text {font-size: 11px}
! u; e Y- _# ^3 V) J/ v6 t3 q}
, t' K* x8 M$ b</style>$ y& t7 e0 m+ c4 w$ Z2 N/ o7 J3 m
</head>
6 R5 d# Y; \( H8 J* n+ l, H<body>
* V h% h) `, Z$ | n0 H
! s2 e4 e: u r7 N+ }<div class="slideshow-container"> a1 e' i' \$ [* u
0 B& O% C& I, B& D<div class="mySlides fade">
) `0 S, l) l/ v" ~ <div class="numbertext">1 / 3</div>$ A6 o F. h3 r- v$ i7 T i
<img src="img_nature_wide.jpg" style="width:100%">3 S: k! T) M5 V& E* i0 M, u
<div class="text">Caption Text</div>
- W) z) q# G, T1 }; y, ^</div>
( y/ [' p% ? L+ T# e& I; ?# Z4 _: [; E7 ?" p# Z" E
<div class="mySlides fade">
7 g( T" p5 o% i. A! n <div class="numbertext">2 / 3</div>' L W$ ?5 @7 w2 Z6 \+ ~
<img src="img_snow_wide.jpg" style="width:100%"> e& H9 g7 W0 k
<div class="text">Caption Two</div>2 N+ F4 v: y+ {: x9 J
</div>6 C" `1 q; i5 J
# R9 ^3 v* @* M<div class="mySlides fade">
9 z3 j# O3 R3 J8 i6 t/ l <div class="numbertext">3 / 3</div>0 p, Z9 V! A9 X$ p" R" \/ f
<img src="img_mountains_wide.jpg" style="width:100%">
7 T. i0 e$ T" @8 D* J0 S9 h5 _ <div class="text">Caption Three</div>
2 ]: T$ }: M4 k0 C3 X</div>- p' h8 R6 d8 ]/ g( F& d3 t
) t. V6 E! E2 E' } r
<a class="prev">❮</a>, o& x2 T/ b, Q: {1 e+ ~
<a class="next">❯</a># _' y- V$ ^3 J- z
- n4 d4 j/ b% ?! l7 N9 [, F/ {4 I# r
</div>, f- U$ X5 V" c. r; W
<br>0 X+ U4 U* u! A D t
1 ?/ V- n) [3 p3 r" {8 h D$ l' n
<div style="text-align:center">& d3 E, S; U, ?8 t. w* v( t
<span class="dot"></span> ; q1 m$ b8 Z: l, c
<span class="dot"></span> + N. b9 N% n& f- X4 D, d- K5 ~
<span class="dot"></span>
4 i5 h' }3 f7 P8 ^5 T0 a+ Y5 F</div>
$ k( g8 x% t# S% t8 d* A: {7 Y& W( ~# i* l8 W5 @) G
<script>8 S) W2 Z" t& U% }( c
var slideIndex = 1;+ x$ U# _. W; y' W5 Z6 Z3 _
showSlides(slideIndex);: a1 X% d j m; Q" [" ?: r
% B( Q. l5 H! {5 M$ h% X
function plusSlides(n) {" M. y0 P2 D# K6 \8 [. |" `9 z
showSlides(slideIndex += n);' Y5 B$ k: W: P6 y, B
}+ [1 _2 W1 s H( w5 Z
2 ` V6 b( O+ e/ J: u4 Q
function currentSlide(n) {7 C( ~& H+ Z7 v" U
showSlides(slideIndex = n);5 D" W$ k: E+ B: _
}1 E3 s/ |5 D' d
9 u' Y" x2 A9 @) h! ~( z- T4 U1 a7 _9 ?
function showSlides(n) {1 N3 q% {8 n8 n- M& ~7 j
var i;6 z8 g: p3 b- m+ c# Z' V) d
var slides = document.getElementsByClassName("mySlides");
; J; n# O" |+ N& n) h var dots = document.getElementsByClassName("dot");+ V' @* F8 J# y
if (n > slides.length) {slideIndex = 1} + _/ p6 q1 ?: g- h! J8 E! ~
if (n < 1) {slideIndex = slides.length}. b: @+ d" H& n
for (i = 0; i < slides.length; i++) {9 b& h) p( I3 U1 ], I
slides.style.display = "none";
$ E0 n+ B! n/ Z: J K1 d& J' W/ y4 m }- i9 C& V! Z/ K7 X
for (i = 0; i < dots.length; i++) {
; @1 i1 f- O$ a+ b8 [( F W( f5 c dots.className = dots.className.replace(" active", "");4 F, k! T( i8 I) e* A$ R
}
, M- A% x: A2 Q" f0 p slides[slideIndex-1].style.display = "block"; # P$ N# S/ Z8 V. k8 Y
dots[slideIndex-1].className += " active";) a4 w# s) a5 j, Y" Y& Y( A) m h
}0 ?5 B/ b" e2 b
</script>
& l8 C4 K* G6 y+ J( t: A9 h" [! s/ [& _! n
</body>. I( P8 H% @, W7 P$ r
</html>
- v/ V" d0 @" R. y" H( r: |5 C; r |
|
楼主: starmars
楼主
