TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑
( g6 c' U; }# l( l- p可以考慮用這個
; z8 s6 e R! g1 {$ c照著套用應該是 OK 的, ]* o* R: \) R6 I$ ~/ f
& L5 K( }5 S; ]+ n4 P
https://www.w3schools.com/howto/ ... tryhow_js_slideshow
p0 u2 `8 A& [! L$ D* U6 f, F7 w2 Y% ?& ^( l/ Z# a
9 I0 J- H0 K4 C
; J( ], x0 F: H$ V/ V V<!DOCTYPE html>
# D* A* I0 X S; J% g" X& j5 B# P<html>: q9 A0 v! w9 O3 }2 r7 N
<head>
9 A) H& v0 r) ]) d) F) Y<meta name="viewport" content="width=device-width, initial-scale=1">
6 J) G9 j" I9 f<style>! ~: A4 f4 w% L' X
* {box-sizing: border-box}0 r9 L. W5 w; ^! |3 U) R: U
body {font-family: Verdana, sans-serif; margin:0}8 I* l7 c6 n: g
.mySlides {display: none}& G' v1 N5 c5 c5 S9 a' o$ Z0 I! p
img {vertical-align: middle;}) r, T! v9 O( K2 l& ?
3 F, U8 @# a* K/* Slideshow container */$ _* d5 ]8 V+ }, D
.slideshow-container {
$ x: f% C& q9 ~6 C max-width: 1000px;+ u* }" W; o* d% Z5 W2 O# V
position: relative;
$ k. x7 c3 p: T% @. M) { margin: auto;
: F* a# A: S4 o) J}
8 G1 Q& e+ s1 y, ]/ Q
) P( u/ E* Z$ O6 K& V. F/ W/* Next & previous buttons */- v5 U7 C2 s2 J! K
.prev, .next {
2 S9 w; q/ ]3 R7 Q0 L9 m cursor: pointer;
! |6 S9 R( |- N+ W$ T* b position: absolute;
. X( L& T& K- E3 x. z top: 50%;$ V4 {% {+ G* p- S8 n$ Q
width: auto;
+ j" b- r! [/ y& h, d padding: 16px;
% {2 s! h# M6 ^. t8 Q, J' w: ]8 D- G( B margin-top: -22px;
2 w' l0 [1 c4 \ color: white;4 m7 v5 x0 y# c. O
font-weight: bold;
4 Q# C( O I, U font-size: 18px;
, H, \$ ?9 b6 ^" a transition: 0.6s ease;
' G2 u8 m2 p& U# L! R border-radius: 0 3px 3px 0;: ^& w f- W& o, ~) A! t" T
user-select: none;
8 j0 t* {4 A% w5 W7 ?# p9 U2 ^}! V% b9 V* j9 k" y3 k: P& I
2 I3 H- l9 Q) B/ f/* Position the "next button" to the right */0 b. s# y8 @" K% k4 m. W Z
.next {% E0 H+ @0 e, }. S- _- X- J, ?+ W
right: 0; I6 E& X6 \- L! {9 b9 ?4 Y$ o# o
border-radius: 3px 0 0 3px;
8 P7 r# X7 H s( q1 J4 Q6 Q}( c! G0 u+ ^8 C% h9 \) ~
& b# Y1 n0 ?1 k- c/ {/* On hover, add a black background color with a little bit see-through */" t B6 N4 W0 z. {5 N3 w
.prev:hover, .next:hover {
* K+ ~6 ?% e( ^7 w background-color: rgba(0,0,0,0.8);
+ Q- ` `+ {0 t% X& ~( `}
: `4 q9 o) {7 z& f6 I4 m" i5 q- Q$ E5 O. l% S
/* Caption text */' f' R x' W* r' H3 u! D0 v
.text {5 Y# m' T# R% t- y7 Z
color: #f2f2f2;
+ t- H9 Y. o1 k" q: Z, b font-size: 15px;* L. Z/ ]" q0 O* E8 R
padding: 8px 12px;( Q% {4 w4 B; }- B
position: absolute;9 X ~: r p; `3 ?7 K
bottom: 8px;" h; N! Y- G( F4 n1 c) C1 F& }0 \
width: 100%;
p6 @/ I5 M5 v E text-align: center;) Y `8 i6 X0 U' A
}
# v: J8 @8 G+ i( W
# |( a, {5 p! u; ^$ I/* Number text (1/3 etc) */
( t1 T( I: ^5 e; m! d. U: m.numbertext {
0 h8 s* B5 u3 M0 c color: #f2f2f2;
7 ~8 u% I, Q- P S0 n; B1 K font-size: 12px;( |3 b A0 I8 n) Z) x
padding: 8px 12px;* ?9 E! E3 G0 T2 R( m( p- D5 F
position: absolute;0 o+ q% q3 Z* C z. a" T
top: 0;
0 S5 U$ y* Y6 @2 N; E}/ @6 N, l: X1 h! B( A
( I. z5 H2 Q+ ^5 d* e8 [: U
/* The dots/bullets/indicators */
: Z" I( Z7 ~& j- Z0 D! }$ I+ a.dot {1 @/ s% q( m+ U* E
cursor: pointer;
2 a8 U+ u1 w+ m+ ]% o' d height: 15px;/ U/ ~1 ] J2 y0 [: z/ J
width: 15px;; W4 O9 {+ I0 K
margin: 0 2px;
2 T7 J* A4 L. S background-color: #bbb;
0 Z4 f6 J0 l6 |$ O border-radius: 50%;
; Z# X2 x& h! C/ U0 ? display: inline-block;
0 h" L, @9 D; U! I4 V transition: background-color 0.6s ease;
! e3 q/ r4 h5 \2 r2 x) V+ d}
1 |" x/ \! q7 V3 z+ G( e: q6 p6 k7 g& J+ p; ]
.active, .dot:hover {
* n' w$ z9 }: z background-color: #717171;
6 |. N3 o8 Y: `}
# A# k s5 _# X5 `1 W
+ D( U' `9 N3 P J, L; N/* Fading animation */
3 |3 r0 m: F0 f" ?; N.fade {2 Q$ ~; O0 Z" h, N
-webkit-animation-name: fade;
; ^4 S7 f% n0 _4 @ -webkit-animation-duration: 1.5s;5 y8 E4 H, Q, h8 ?: @% s( e4 b
animation-name: fade;
n0 \# c4 v# l T1 z& M; X animation-duration: 1.5s;, e5 x- u) t6 x `$ u0 y
}0 q6 H5 ~/ k: [3 C
; h. e# s5 `6 I; `, v
@-webkit-keyframes fade {* s& M# [2 R, P- X2 i7 p
from {opacity: .4} $ F3 G! l: I y2 z9 R8 T6 G
to {opacity: 1}
/ |1 r( F' ?1 a% v$ x. T% Z}
. U, p% f6 O" Y, D _
/ r- L% d* K# e! H, m% Z2 _$ D@keyframes fade {; P8 s- g, J7 K- y: u! D
from {opacity: .4} 8 n7 M+ W) B5 ], C' `
to {opacity: 1}% D$ @9 J/ x7 J( I, |3 i! L. P
}+ d$ z/ K# f# `3 _
9 ~ U- ~2 ~( q! u
/* On smaller screens, decrease text size */
% g3 F; z8 J6 E8 @6 y/ e@media only screen and (max-width: 300px) {
+ I- x5 Y2 e$ E; d: h4 { .prev, .next,.text {font-size: 11px}
' y# ?. e: l$ Q: @. W# w}
1 H7 ]" b, N8 Z/ w4 K</style>) E9 n/ L/ O# _5 @' k Z
</head>
. d5 I. ]+ O$ j* d7 ^) z2 V8 h/ k7 Q9 _<body>
& [4 K! h' m' y4 d- K
9 |# L: a( y: Q, _4 W<div class="slideshow-container"># ^& n( x& V, e/ `% D
9 X9 y9 `6 N# g+ W; G; g7 s
<div class="mySlides fade">
! o+ L: N W, | <div class="numbertext">1 / 3</div>7 [9 S5 `1 g, h$ r* v
<img src="img_nature_wide.jpg" style="width:100%">; [2 N3 e4 n1 O% g& b) v2 _
<div class="text">Caption Text</div>
) ^' N1 P6 U* h, C# j2 ?! W</div>$ s) l! {1 C/ X" c2 C/ ]: f
2 C# e) E, c+ t2 G. d s<div class="mySlides fade">9 V* {- q9 R8 y, b1 \2 q; \
<div class="numbertext">2 / 3</div>: B8 T/ k7 {) j5 Z
<img src="img_snow_wide.jpg" style="width:100%">. t( f* M, e9 } X p6 a
<div class="text">Caption Two</div>% T" g+ F5 P( ]" y4 d- i8 ]
</div>/ m% B B: J& e+ b4 y
; \# ]/ Y7 Q5 u0 ^2 T) H
<div class="mySlides fade">2 V& l6 r5 A. G3 v1 T p
<div class="numbertext">3 / 3</div>. t$ J4 t8 t( e+ a6 W* F- v
<img src="img_mountains_wide.jpg" style="width:100%">
2 h/ V6 @2 `: x( S$ a3 V1 H <div class="text">Caption Three</div>: l, A) l& e% o1 J: j/ ?
</div>
- F! n' O7 m$ P8 c, S
+ C, g$ S; O0 {. W* L7 O/ Z<a class="prev">❮</a>
& Z8 Q _+ Y* R6 P5 a4 S- O<a class="next">❯</a>& i' A! h: f# M, B1 U' w( \
% X! B9 g- V( F5 }</div>
5 [" O3 t/ L, _ M; S' K- I# \<br>
; \3 s- Y3 I4 k4 L& b6 Z6 c- n) ?5 p$ k l3 P& z
<div style="text-align:center">
5 U' E p; }2 \- r1 Q; P, P9 H <span class="dot"></span>
- B( ~/ ]0 c6 Q d <span class="dot"></span>
/ Y- ^( p# Q1 u9 I5 w# T6 u8 w <span class="dot"></span>
! q- C0 @7 ^; k: a K2 ?</div>! q# J* c$ [3 v; Y, C1 ?3 w
: w/ `8 R, B! e<script>( r, v" s! p7 k# _3 R) _$ [; W
var slideIndex = 1;
! }- `0 p2 p5 h# _$ xshowSlides(slideIndex);9 z( K z% P. P, V* M. t+ z
" z! ?' R+ b* e8 K) g" E1 ]. k
function plusSlides(n) {
/ [) G( _5 m' ]) y showSlides(slideIndex += n); N: L# {( H9 q+ b# V
}
4 B1 G. ~1 ?2 Y/ S" U2 i9 x3 i( O( l9 y2 n% N6 [2 ^
function currentSlide(n) {
/ `1 _! q4 u; D1 S3 d; w showSlides(slideIndex = n);- @. E3 M9 e& y0 C) F$ E
}
( ~! P) D/ t' }& U9 b3 r' t( j/ \' @% W$ b: h! S
function showSlides(n) {2 |8 c# n1 S2 y6 m/ R# h' u
var i;5 D) F6 K* S( D% Z- h6 r
var slides = document.getElementsByClassName("mySlides");
5 H1 |& u" Q2 a% Y# z var dots = document.getElementsByClassName("dot");
8 o7 P: u1 H5 ` i; ~- [5 e Y+ C if (n > slides.length) {slideIndex = 1} ; k. ?, q, s8 l5 c4 j' P
if (n < 1) {slideIndex = slides.length}
# S3 i8 s$ J) w0 |0 R. M& } for (i = 0; i < slides.length; i++) {
% k. O6 C# u, u# P3 z: j slides.style.display = "none";
- m! s l0 h, }9 |8 B: ` }& l1 @3 y7 X0 U0 b2 w7 f; U
for (i = 0; i < dots.length; i++) {6 N% Q2 T& |" e: m6 ~* k% _4 b- D
dots.className = dots.className.replace(" active", "");
- I6 n, n* a) Q7 b6 x: i }
! g1 p1 q$ n5 c slides[slideIndex-1].style.display = "block"; " g- d8 u/ P% @* d/ O7 V
dots[slideIndex-1].className += " active";- f0 f3 P$ P+ i z
}1 w& s8 ^) d6 [ T9 m5 N* |
</script>, {: q1 O/ ?$ A; p; ~- W
7 M ?! W/ |7 L" w; {# O</body>
$ N! I& \* o7 `</html>
|
|
楼主
），别说再去弄 JS 了，更何况只是个图片词典而已4 |, J: M* P- M* S3 x9 Z9 R
1 i+ H! ^' `+ _! s9 ?8 C9 G
$ m) w5 J# e( M# @
+ O" p* y; E) K9 Y# ~% V