TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑 6 [5 P$ n- ~! J( i# n+ j. s
可以考慮用這個
3 P$ _) N1 t4 S8 ?$ ]0 o照著套用應該是 OK 的
' [. q3 @1 v3 O! S: q+ M: a% c. j/ g0 ~/ S2 I' W
https://www.w3schools.com/howto/ ... tryhow_js_slideshow
8 w: _4 ?" {% T2 j% c
8 J8 x3 M/ \) q3 M% p) n
7 R, M. z. }7 l4 q5 c" Y+ T% q
* g; g i1 U y& {$ ]<!DOCTYPE html>
% I% c9 j8 H- u& K7 U1 C: M- X<html>
5 _. z) `9 U2 ] s2 Y" D* G' J<head>
% H7 M i) z, [$ B* C) @ z% P% p<meta name="viewport" content="width=device-width, initial-scale=1">( k& e, o% N( `& b {
<style>/ w0 F$ }! v9 l" x( r/ |9 ^2 }
* {box-sizing: border-box}
5 P8 Z* f7 U8 k! p' j) V$ fbody {font-family: Verdana, sans-serif; margin:0}" w: Q {; O1 d3 F% B
.mySlides {display: none}+ M4 u# z9 @0 L7 T; k& u
img {vertical-align: middle;}
2 ]7 s, W. E$ X( L F, o7 z) F/ V! H
( v$ _. F9 P# Q7 Z1 y- x/* Slideshow container */2 m) X" E& \) d: G3 }& {7 a
.slideshow-container {; R& x! j' Y/ Z" ~' G. N' V; \
max-width: 1000px;
$ A! c( j4 u M position: relative;
+ ^8 E& I1 b% B( [, u margin: auto;
+ z, p0 n! S1 r) U}4 ]" I! ^* @4 i8 w
% B( v4 v9 h% T2 _( _$ F; r$ R/* Next & previous buttons */
/ N5 V8 z1 o. V" f$ y, r `: c.prev, .next {5 W3 B# m0 n$ }$ V: [$ j( F
cursor: pointer;0 D# O+ b7 h" D* x# B" i$ D; T
position: absolute;: c# P/ { t& T+ ^7 i
top: 50%;
; W1 y! V3 {# B- z ~2 ^& x8 y width: auto;" E! r# N5 \ b
padding: 16px;
- L9 k/ b# m8 j7 v: I1 i" ^& z! F margin-top: -22px;
% r# H Q2 W* C7 ?, o! n4 l3 D color: white;
8 q. B4 r6 F* V4 W7 }1 C) w: h- v font-weight: bold;
/ C9 Z# U, N. B font-size: 18px;
$ B* k \9 _) Z- Q4 h transition: 0.6s ease;$ V, a6 K5 G# D) A9 g
border-radius: 0 3px 3px 0; q. t" e! t( d; Y
user-select: none;4 G h. ^2 M" \3 G' J( Q. V" |
}
: p. G5 l; A1 u- [. I7 Z5 T1 {/ m5 e) c( {; x) h
/* Position the "next button" to the right */
8 v9 g) V% d4 ]' p* E$ Z.next {& F4 {1 P6 F/ h
right: 0;
# Z0 I6 E0 ]1 d3 ` border-radius: 3px 0 0 3px;+ V( f* K. P! n$ ?* B
}* e0 E& W: s/ l8 G2 r
6 n% K. s* b. n* C/* On hover, add a black background color with a little bit see-through */" Q; Y. D5 c: E6 I
.prev:hover, .next:hover {
9 t [ ~" w9 H* [ background-color: rgba(0,0,0,0.8);/ _( G M; Q% m# J* O3 @
}
3 u( S8 ]/ S1 |6 V. k" J# G% Q/ T) D* j s9 ~2 v0 q
/* Caption text *// \- J4 T' k) R- H) k
.text {
+ }: v% \& T# H( D6 ^ color: #f2f2f2;: ]# j g" ~) n# r/ T
font-size: 15px;
+ w2 s6 t8 z- i( A/ g" ]2 k$ v$ |6 t padding: 8px 12px;) W0 _9 n- T% `% s. i
position: absolute;7 w ^4 n5 X2 ? s* w/ i
bottom: 8px;$ Y, _: @# p/ D
width: 100%;
& S- i2 q) a! i+ [6 a text-align: center;
/ v5 Y F$ j& v f8 B}
" e" a5 z$ S6 ~& f
8 m& y2 P# a5 L% }; b$ L/* Number text (1/3 etc) */" s& u, ^6 I" Z5 s9 |. t% M
.numbertext { U; ?. s6 j3 {1 ~% p
color: #f2f2f2;9 z8 n# }: Q; u# O3 B9 K
font-size: 12px;
" T$ b& {/ j" n" X5 W" \/ ~2 e padding: 8px 12px;
+ d, o2 x$ {" x& R( ? position: absolute;# I# [. S2 D. b: K
top: 0;5 e$ g2 R% E+ x/ a& L
}) e% O% w8 y+ H+ l
6 Q+ _$ f/ K- V6 b4 d- W* z
/* The dots/bullets/indicators */
e1 \# u/ ~0 M @" w.dot {8 n1 c, [- Q6 E D: S" J
cursor: pointer;7 g* w5 l$ c8 [; T" v/ ^
height: 15px;& N8 V+ V. D+ m+ J
width: 15px;
6 S: w: n# a/ h margin: 0 2px;
I: B5 t- q+ W' G7 s background-color: #bbb;. F' M1 O0 ^; t4 ]. N
border-radius: 50%;/ S% ~) p7 |6 |7 N
display: inline-block;- U+ k# r y; F! G6 ]
transition: background-color 0.6s ease;
& P/ y* [8 w" t# k2 E}
. E. J. m$ f& d; ~: x$ X: \1 O. a
6 U- |* B7 A7 Q5 F F t" Q& l& C# i.active, .dot:hover {
) Z% H& m# [8 C0 v1 V: ? background-color: #717171;6 A+ l6 n ?) n* k+ r* n9 B
}
: M$ S0 ~9 v1 M; z
8 N4 N+ k0 N" E5 I: H/* Fading animation */0 s/ g( S1 Z. g! S# V- d; l
.fade {
, `' M; ?6 i) f -webkit-animation-name: fade;
( y* I3 R' `7 g$ }# i# U -webkit-animation-duration: 1.5s;
" e& Q$ F4 I) {+ j0 D0 Z- k animation-name: fade;
/ }$ T$ X2 V% n+ |7 q animation-duration: 1.5s;, Y: N2 ]$ \2 Q" a1 Y' J' F, g
}. W; D& c, a% F2 U* c5 X
6 p. N( C. A0 x. I. w4 C( M
@-webkit-keyframes fade {) O6 U# I. {# c( k u
from {opacity: .4}
( O |- R$ n ~" a' S8 h2 C to {opacity: 1}; t. j. u4 R2 s w p4 R% E
}
2 a' o5 A' u4 I+ ~8 b" a5 Q" N( G. ?' b5 |
@keyframes fade {2 M& {4 R5 i+ L
from {opacity: .4} 4 N4 n! n/ j2 b6 h6 d, Q
to {opacity: 1}
5 S$ t' E) j _. C3 r! Z}( N6 B2 n. o' l# i/ R A1 c
4 V3 x- a0 F2 Z/ n
/* On smaller screens, decrease text size */
' W. G: }# V2 _@media only screen and (max-width: 300px) {
" ^) E# i* G* Q6 Q" K" D4 P4 l .prev, .next,.text {font-size: 11px}) F- m' r6 O* K% h6 S) d+ W# B0 o
}2 J9 G/ z4 G% W1 k; o" H; n
</style>
* @, {: E6 v5 H% i- I% {0 S5 t</head>
5 b A k+ j3 g+ j<body>" F0 \7 |- e+ [- R
% `/ S0 v( D; K& B<div class="slideshow-container">3 h1 V4 u( L! @' l0 D6 Z. T
' }" B* ~. `. {5 N @<div class="mySlides fade">
: f; E/ A/ ?% E <div class="numbertext">1 / 3</div>
/ |( i' d! E5 i% ]7 D <img src="img_nature_wide.jpg" style="width:100%">
/ Z% v0 J3 n+ D4 r <div class="text">Caption Text</div>" T# S! T1 c: Y$ K9 I5 k
</div>3 f- ?, w4 @' r* ]
2 q$ I! @# O3 E# _# S: X N8 s
<div class="mySlides fade">
$ [3 E% H. E( U$ } <div class="numbertext">2 / 3</div>
3 c6 r, h: B# W; y% R4 f9 p3 _ <img src="img_snow_wide.jpg" style="width:100%">
/ a# b2 N: H# a( y <div class="text">Caption Two</div>2 O1 M( L& E$ A7 e3 |+ ?
</div># b; d" a' k* h% e% p* a# e
$ c9 l& V% }8 L! e" R8 M" }2 B" ~' v
<div class="mySlides fade">' g5 [) S( f7 j8 @1 E; b6 e
<div class="numbertext">3 / 3</div>
6 U, Y5 L# _: @6 e: x: l$ X6 _! _ <img src="img_mountains_wide.jpg" style="width:100%">
0 `5 n; r) t1 R3 y k6 |8 e9 @ <div class="text">Caption Three</div>
( r, ~- ]. Z) t5 s# ?# n</div> g$ N) C. h( r K
) n; m3 C1 j, L3 f( d4 K
<a class="prev">❮</a>% U& E$ _/ M @% F
<a class="next">❯</a>
9 O: E7 i& Y7 Q- [' i( q! G
9 C; s$ @& _% N6 {! U- ~4 X</div>0 ?& a* ?! s9 t" b& }; l
<br>
' V3 \3 h# w- O1 D8 p4 {* N
7 I- K8 L- J; W u0 m6 a+ F<div style="text-align:center">
( L* c) i$ S& y7 Z <span class="dot"></span>
6 n8 P8 [1 T: W- {( z <span class="dot"></span>
/ i& @! G M/ J" @* Q% Y <span class="dot"></span>
! ]$ o& b6 Z' E$ W( j</div>
/ V8 B4 D P- |1 `- m+ ]' m6 l; r$ a: A+ }0 g2 x$ f3 Q2 `/ U% l) l, R
<script>2 o' V% U2 x, }7 a6 }4 R
var slideIndex = 1;
, v0 `9 v ^! Y$ @showSlides(slideIndex);5 O) r8 w% a* V( J, P
1 @, ~( v2 P9 b5 V, U5 R8 A kfunction plusSlides(n) {
7 I+ t q; J1 X$ C/ E showSlides(slideIndex += n);
, j( q7 M4 ~7 R3 t9 k}
9 L3 j! O9 H% B3 e, ]$ K8 I
& ]: W6 _& Q; Ofunction currentSlide(n) {
0 [& N' `* I4 _, q4 \ showSlides(slideIndex = n);
! L+ a. f0 I) @5 j2 c0 N: Y+ v}' r8 i2 j7 [, X1 A4 }7 r7 u+ s) A2 D+ w% H7 g
7 U( K$ J3 F$ k" V4 {) i5 ^1 ?
function showSlides(n) {
& j- H. n4 l. t) h f3 V6 m var i;
/ ]- A4 |9 R7 q4 l0 K* p- N! F var slides = document.getElementsByClassName("mySlides");% P$ q* N; I7 _! q8 [( K
var dots = document.getElementsByClassName("dot");* q- r1 m: H/ B, V
if (n > slides.length) {slideIndex = 1} ) v% V" p0 [+ P
if (n < 1) {slideIndex = slides.length}
; b" M5 B: a$ s. i2 x for (i = 0; i < slides.length; i++) {5 y+ A/ B$ O3 X5 z7 W
slides.style.display = "none";
7 @: E8 }5 F7 A7 ]# ?$ B0 x! p }
0 U& s3 A2 D$ @! J0 L+ a) h for (i = 0; i < dots.length; i++) {1 A s" k& @/ p1 T* H) Y9 @
dots.className = dots.className.replace(" active", "");
9 x6 i8 ^: R% P }
' |( r* N4 n+ B$ ^( U I2 K/ y slides[slideIndex-1].style.display = "block";
" X2 o& W" P+ I% U dots[slideIndex-1].className += " active";
- w, Z& k1 B9 r& R1 b, K}
" j$ m% |4 s7 U5 C0 s; Y</script>
3 Y. R k, d- D0 j: c% h9 a
$ [" i% W5 ?7 R) |</body>
( U* l! h r! X4 K</html>
( S( ^ h, D1 P |
|
楼主: starmars
楼主
