TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑 2 @) m4 Y2 H" h
可以考慮用這個
2 Q+ Q* E3 s/ X照著套用應該是 OK 的2 H$ U; l4 u0 ^- n: h0 B: f
) O# ?# f8 Z) v; j: H9 K
https://www.w3schools.com/howto/ ... tryhow_js_slideshow& l: U0 I/ e! D- ?7 V
, @' j. R: |4 l, |: A8 Z% h1 p6 B9 R- ?) j
' Z& [# e4 y( j. [; l. h" o5 @<!DOCTYPE html>
# Y. L. K! n& h: P7 r# U) Z<html>
5 L& W: y) i: Q5 n6 ^5 m- D<head>
) O6 Z$ Z+ f# I. I<meta name="viewport" content="width=device-width, initial-scale=1">
C6 @( D1 F G2 k% m" P6 M' o<style>" a8 K" H \- u' N% p' u
* {box-sizing: border-box}5 s- e+ @3 Z& y% p
body {font-family: Verdana, sans-serif; margin:0}
4 _$ f, K7 r# g5 M$ d.mySlides {display: none}0 ]% }# `. k5 p# ]: m) L4 t& {
img {vertical-align: middle;}
& J7 Y( P3 s, J2 H% O
1 w! Y7 }, x. c+ B% e/* Slideshow container */: U& m3 r! W X: r, I6 ^5 E, s
.slideshow-container {
% a2 m/ i) X% z9 W max-width: 1000px;
% _8 e' q% N$ X: O% d, E position: relative;
/ q# N! l8 _. N* v1 c/ W margin: auto;$ N5 {/ y9 X" X& @' c1 U- D! H
}) |+ G+ u9 M2 ?3 u
$ N1 t" f+ v! ^+ s; X" d/* Next & previous buttons */
) f& A) `. P* U4 E: A L* Q.prev, .next {' F% p2 n# A$ d* ]! t: l
cursor: pointer;2 i" W. u5 c9 B. |& X2 r6 e
position: absolute;
; Y( |9 l f2 ~. ~4 O8 J/ M top: 50%;; q/ P" y4 T0 @8 f3 ?
width: auto;2 S# A7 f9 _6 X. K" Q
padding: 16px;* w) R7 v) W h' f# D9 J- ]
margin-top: -22px;4 `7 N% @! ^; Y( a" ~7 g
color: white;
/ U" E& C- Z. ^8 e/ V$ o font-weight: bold;7 n. G N/ z1 o0 A& R; M c
font-size: 18px;
; J5 A$ h1 D {8 |5 m( p transition: 0.6s ease;& X: ~" a' G) z1 A
border-radius: 0 3px 3px 0;5 [- R# y7 ~* C
user-select: none;( X1 ^' K$ V, W. T
}
# u& L; N5 ~+ ^6 w' o8 \
& ?6 i+ D% b- ?! n6 x2 ~; c7 d/* Position the "next button" to the right */% W" ^, U+ e9 R y" f9 u ~* c
.next {
1 ]- s4 U% b6 ` K# |0 @' g right: 0;
% u7 T$ a& i. Z5 g border-radius: 3px 0 0 3px;
' Z' H" P3 D0 O}; J; I; B- N/ l
$ W, q" t. o# F. T6 f7 A# e
/* On hover, add a black background color with a little bit see-through */3 w+ p* [% A# D8 m
.prev:hover, .next:hover {3 p$ p: C' y# t$ X: A
background-color: rgba(0,0,0,0.8);
) g1 ^8 q% z& |}
" S2 S5 b( [; ~* L5 W1 ?% \1 b, g/ M/ k% C6 u* q& _( H5 l5 C/ l5 S& q
/* Caption text */
/ m3 v0 A" v1 p8 x/ P1 j" j.text {
' L0 Q$ w/ l; r" B color: #f2f2f2;
& _4 ~* @) h# i! R) B- X& P5 s- ~+ G font-size: 15px;
/ V) x& U% q( [2 S) k, u0 A2 j: A padding: 8px 12px;* f2 K% ~5 Z( ?1 t
position: absolute;
# V6 g1 y- i+ S% h, S& B bottom: 8px;- c, q7 Q* h1 i1 S/ j0 T7 {
width: 100%;
0 N4 W0 v- C( S% x text-align: center;) Q- Y0 t2 ^4 Y2 j. A
}
9 f1 u. R0 H8 P0 S1 J2 ~; b' S1 x
" E0 G2 U( a7 g0 A# \$ t. X/* Number text (1/3 etc) */
5 E+ t' C1 {! E0 F.numbertext {8 T+ A3 F+ D) L7 x
color: #f2f2f2;
$ J" g" o$ ?2 n' ? S font-size: 12px;- @. N: n! M( K, `. u
padding: 8px 12px;
0 I$ g3 Y1 Q9 C6 t position: absolute;) s$ h; h& B6 _4 a. Q) Z& o
top: 0;
& w6 G' ]- N. p" j: V}
( H& A- i. Z. R0 V$ Y$ H
, p" a: S% ^1 }6 z1 @/ F- A% w# u- G/* The dots/bullets/indicators */; k7 j g6 c/ w5 X- h3 {! n
.dot {
- p* ~+ a5 N- \ cursor: pointer;4 q1 p7 b' p% V1 C- ]
height: 15px;
0 n- |& U% j( L0 @5 I0 ^ width: 15px;9 Q2 I; l. U9 M7 d! J
margin: 0 2px;
# G$ p8 c, F5 w' ] background-color: #bbb;2 m' ~* j5 b; @
border-radius: 50%;
# k" R$ P& h: p9 ] display: inline-block;) x" W0 N% _; [% F: Y( v
transition: background-color 0.6s ease;& J l& L8 ]! t3 Q' A; o
}
- M- ]- S6 U7 M6 x* ]1 l
8 m) r9 i9 X u, j6 R( j3 c* Z9 w.active, .dot:hover {
, @0 O; Q5 i, W6 q background-color: #717171;
8 \) ~5 f E6 |0 a, Z}
, C/ M/ z) `& v/ p: T8 p6 p: V0 _2 {3 m% \6 w
/* Fading animation */
. X8 A' L2 _' _" k# H.fade {' o, P8 P' h2 e+ h K/ V
-webkit-animation-name: fade;
. o& D* f6 F& ^3 V# T -webkit-animation-duration: 1.5s;
' w6 k. [- N" V8 E' j; X# w* R animation-name: fade;
7 L$ \: h# v6 w/ p animation-duration: 1.5s;7 B1 v: C/ {8 e7 o0 d
}, b6 V Z. U2 {, `# g Y
8 {6 I& k$ s+ z# f }* G) i+ s
@-webkit-keyframes fade {. Z# I, i8 C/ M3 l" l T- \
from {opacity: .4}
: h4 v, Z/ h9 T) G to {opacity: 1}
; a7 Y+ X9 a& U+ s0 U}% \; V7 C1 O: z5 l9 k4 U; g
5 N m5 ]! \- g
@keyframes fade {% s9 `; o9 C2 l' B/ Q7 M1 m/ G! c
from {opacity: .4} ( S" x V5 M# B5 p1 U0 ~5 w2 V3 @$ d
to {opacity: 1}2 M9 K- `; Q `1 [0 c
}1 t$ _. q+ Y6 `% {( ` `
7 y, ^8 Q: o9 [ Y J6 l/* On smaller screens, decrease text size */% X! W. E/ C8 |: `1 P
@media only screen and (max-width: 300px) {
x. t+ r1 a# p8 c8 c) R .prev, .next,.text {font-size: 11px}" M# l# w) ?% Y; W: C
}
: }8 _1 D0 g5 t# s& U( w</style>+ x& Z% _5 N7 f2 |) ^& N U
</head>4 N- u2 ~# V" T2 n
<body>
: z6 y, o, U" s/ q/ }5 r w- k! N7 _) X6 [: p+ `% O p' o; l
<div class="slideshow-container">
- h l5 q5 c0 w0 a8 J: W0 l; ]' K0 ^& w( g- [: J1 P
<div class="mySlides fade">
: v/ d. _) ^1 g2 R# f; Z <div class="numbertext">1 / 3</div>
# K A' c" K7 {9 N) [. \7 F <img src="img_nature_wide.jpg" style="width:100%">
. `# w) U* L: M0 y1 g: S% A <div class="text">Caption Text</div>: t+ j* D& |6 p6 f
</div>$ y& v5 p0 C( J/ i
& q9 X& g5 E( } D<div class="mySlides fade">, ^# S2 J9 @; z
<div class="numbertext">2 / 3</div>
; k; Q2 h4 R* A* r. ^, ? <img src="img_snow_wide.jpg" style="width:100%">/ [# i9 C( p& X7 w
<div class="text">Caption Two</div>; R2 s9 j8 t" l# H3 a6 c- _
</div>
( `5 o# L$ f( D6 l/ H7 a4 Z2 t, M; x, Y5 a& Z
<div class="mySlides fade">+ _, x3 A1 C7 A: ?1 B& u+ m
<div class="numbertext">3 / 3</div>
# ~& L% G- ?6 f; S+ | <img src="img_mountains_wide.jpg" style="width:100%">
. U: C& h1 ~" f% L; F- v <div class="text">Caption Three</div>8 i0 P* |' {5 c- k
</div>
% g- @/ c! q! k! @0 R# U
; G' b P! ^. i2 q<a class="prev">❮</a>3 q9 u; N5 l0 `
<a class="next">❯</a>
: i9 W/ Y D$ P) Y# K( X: A
2 }6 g+ c2 t+ U3 j2 K</div>
. f. h% Q: D, L B<br>
% b3 Q) n% K+ g+ V6 G
! B3 J$ P6 a0 R& p6 U" w<div style="text-align:center">
% f" A6 J# @ d2 E: K. R <span class="dot"></span>
* {. m" y" w* L* P <span class="dot"></span> 3 O( I$ p/ r( F
<span class="dot"></span>
3 M$ H" p3 q2 w+ ~; s6 ~7 y</div>
! _+ y, ]" L9 x- G3 R+ J# n- A/ h9 D
/ L k! Q- T, s" G# L( P4 X<script>
# @6 |! g/ M Z! B* ivar slideIndex = 1;! _, k% \( w1 j2 \% M8 L
showSlides(slideIndex);7 E6 I% z. }" G
8 n. D( {+ x0 x" Ifunction plusSlides(n) {5 A4 m. n& j2 g, U2 Z1 U
showSlides(slideIndex += n);
+ l- S! w; e6 s7 D3 I8 ~1 l2 Q}2 t, W p4 O; x4 \4 }
/ p6 ? u6 J% @4 i9 Dfunction currentSlide(n) {; T, i. w6 n9 I' x( d5 r+ Y7 G$ g9 u
showSlides(slideIndex = n);# j; X0 g) g1 \5 ]# U6 O- a
}
8 }# f0 X5 c# Z) }2 h) D, i
! M h* K* {8 S1 r& m8 Vfunction showSlides(n) {' c! M! b5 f: f/ B
var i;9 \ n2 I+ L8 o% c( q$ X
var slides = document.getElementsByClassName("mySlides");" H- i& z. z' V: E' R1 N
var dots = document.getElementsByClassName("dot");3 P, @0 x( B* c) J5 f" ?3 l
if (n > slides.length) {slideIndex = 1}
3 ^, ~* O8 r0 i) U0 p. P/ \, o1 ? if (n < 1) {slideIndex = slides.length}8 H+ V1 F' l3 v3 e9 s t7 y! I
for (i = 0; i < slides.length; i++) {& y. m$ t0 j$ z1 R+ H( R
slides.style.display = "none";
* X3 ?! [5 ]4 h) f) p* s& q( e }9 o* y5 J p, H; }( G) Q3 A6 e( n
for (i = 0; i < dots.length; i++) {
/ v' n2 K# `) z. e. R' f dots.className = dots.className.replace(" active", "");
- q2 f' ]3 x& V, m& A4 X }1 E' \7 }$ n( x0 e; _6 j
slides[slideIndex-1].style.display = "block";
" |0 I9 g6 `7 r! }8 R$ y! l$ ~ dots[slideIndex-1].className += " active";
; c2 d2 k! s, E4 O: u}, A: M4 \3 R* s2 h
</script>+ _# b2 E' Q) p% [
. E1 I& ?, S y' ~0 i
</body>: d6 |$ j" M) r4 i+ ~
</html>
* R' ]; M0 J5 D( z1 G# k |
|