TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑 * h, ]8 Z! d. B( k
可以考慮用這個- ^$ k5 D: y F. `
照著套用應該是 OK 的
! z2 P5 z2 Q) F! m4 ~( I Y3 p, I, R' ] e1 @3 ^4 |6 P2 I5 i
https://www.w3schools.com/howto/ ... tryhow_js_slideshow
: `6 s q% h% m5 z/ N/ S! f& k/ w/ q8 d
 / d9 l' E: G# A$ S B
, T5 l+ A3 x" x3 `: Z' M<!DOCTYPE html>
& U9 w6 A+ s" |9 D9 U* q& t<html>
# C' ^, Z. u1 s0 ^. W: C- t: k<head> K# C1 f' P! L+ H
<meta name="viewport" content="width=device-width, initial-scale=1">
8 K1 U- C+ t' z) t) ?<style>
) s# L" Y4 T! y% a. O& a* {box-sizing: border-box}
/ P' K+ v A! i8 g `- b6 |body {font-family: Verdana, sans-serif; margin:0}3 u% x, J+ {% v5 _& k
.mySlides {display: none} }: {- O, |( T8 U$ }6 @5 b
img {vertical-align: middle;}
. R+ J2 c+ Y8 v/ p" S& k* y2 ~# \% Z( X8 d
/* Slideshow container */% a% g7 w3 W$ {0 ?9 ^/ {0 \
.slideshow-container {
! M) J* I! g% d max-width: 1000px;
( h& s+ I3 U( A/ P5 \( p$ M( A position: relative;5 o# x& p& ~! N6 |
margin: auto;( ~! p8 \7 T3 y G
}
" u. G3 ?+ T& ^, c9 _. B9 S" G& `& g- C# b: Y: a
/* Next & previous buttons */1 b" N1 Y7 O2 W7 D
.prev, .next {8 O& \) @; j7 @7 g' f; v
cursor: pointer;
$ X- g! s8 S( _" G" z position: absolute;; r4 U$ c; y) D8 R8 x: D; `+ Q1 O
top: 50%;5 S' r5 b6 g1 O
width: auto;
5 Z; f# O! p2 A: M padding: 16px;
3 W9 _8 a; F0 q4 V( a1 K% e' v margin-top: -22px;
- y# H: F2 p0 A+ K3 P color: white;0 U% K! H {# ~
font-weight: bold;
! |# w/ P+ o7 j+ N* |% a/ l font-size: 18px;( o( y( i$ R' Q
transition: 0.6s ease;( O% `, }# s+ s: B: [/ q
border-radius: 0 3px 3px 0;
4 x) \* w. |% h user-select: none;" ]) I' Q7 N6 B, a, ~* P
}7 @- Q8 W3 D# u0 O: q4 L- @) ^
1 q# g; ]& K: w
/* Position the "next button" to the right */: u' r$ g( x$ e
.next {3 }9 ] G5 Q$ j2 A* T" S
right: 0;+ e; h0 d7 K; @- N; x
border-radius: 3px 0 0 3px;
6 @0 A: r# U+ F# R2 N" {! v2 b7 D. D}
% F- \; H% E! u) f2 O
/ y3 V' N2 P" T; K( s( ` |/* On hover, add a black background color with a little bit see-through */( Z9 j: E$ l8 E) P( s0 \
.prev:hover, .next:hover {" \+ p' v2 K# s
background-color: rgba(0,0,0,0.8);
$ Z' P7 c3 S$ N% `. i% y# N}0 b5 Z" k% H* L! \; x% c+ K
. N& A3 P& k8 e; h" N. b. V6 {
/* Caption text */
2 }2 U ^' K8 O) `2 C.text {# E S* C0 m& d' _1 h
color: #f2f2f2;
) l0 r: h) B+ p2 K% w, R/ t- ~ font-size: 15px;
/ r& [ Z- q+ M! _ padding: 8px 12px;3 O5 V! \+ m% J4 ]* z: n
position: absolute;
- Y7 F! A0 _- C; B. @5 S- ` bottom: 8px;
' c* k/ n4 o, I, _ width: 100%;
8 A, D1 M* p: s text-align: center;
0 F3 @% R9 c2 \) e1 {* y6 r}' W( h8 R9 L/ G: P0 S3 }
2 ~ v1 T% V5 I* _/ ~* t/* Number text (1/3 etc) */% y% h' z& b) f* ~: w8 P
.numbertext {
/ m6 [+ O) ? Y7 t color: #f2f2f2;
9 G& O, I; }+ _, Z R+ _! z font-size: 12px;
5 ], A, G- ]. v) w" z6 _ padding: 8px 12px;
) w$ c4 _$ p6 l0 r position: absolute;$ K0 Z) [! B9 r
top: 0;
1 `7 G; w k/ u- ?}
4 B$ J, A% L7 g' @7 L9 C# Q/ Z, }) d3 l5 z# e
/* The dots/bullets/indicators */9 U; H) C( I5 k; }" g; C' u* y
.dot {
9 e* x: o" q K! f P cursor: pointer;
; X& e6 J/ c+ R) I! p height: 15px;8 u4 [, {% @9 m+ K$ H: f% R
width: 15px;: _, w: U; M" N! y
margin: 0 2px;
& V" u5 R5 p- W background-color: #bbb;
' }* h1 f g( v W5 N border-radius: 50%;
6 F! O+ \, D, [6 C9 K. c display: inline-block;) [ V* s& Q) `
transition: background-color 0.6s ease;
1 |1 X* z* \: C# F9 \+ \ r4 @9 H}
# S% Y5 r) x$ u& E5 U0 v" H3 E0 x- c
.active, .dot:hover {8 ]& j* j7 Y# }8 Y6 v* V: \ [
background-color: #717171;! d e5 i6 f; w( L3 A* ]7 C
}
2 Z0 [6 B" o6 s9 W* a1 K5 r2 G8 @6 F p7 H; E) R. i9 {
/* Fading animation */5 G( i+ k( w- ^+ k, q
.fade {" ]; j8 L$ W( O0 H3 E: \
-webkit-animation-name: fade;& [0 U& T" N$ U8 @' i+ F, x- G
-webkit-animation-duration: 1.5s;
( T5 j1 Q$ w' E3 ^' T animation-name: fade;2 f1 M `0 r7 o. H
animation-duration: 1.5s;9 O3 t( l- V+ x' d8 p
}* T0 @ Y' O& z6 P0 `
6 k3 f+ D% H% N3 l, T: }0 z: c& b@-webkit-keyframes fade {' q8 P1 _4 g- H7 R, R
from {opacity: .4}
7 Q; i4 l+ l; i% Q to {opacity: 1}
- Q# _) d: s* M3 x}
! W3 }5 r$ Q" f8 N. B
1 y9 Z4 E; b& F3 c( W. k( [. q@keyframes fade {, |. s: m4 O8 S2 L$ W; U
from {opacity: .4} ( ^* S0 D3 h i, N7 T8 R. t5 P
to {opacity: 1}
: Q3 e5 y6 `+ I+ i3 Q8 y}; ?# u' m) E4 {! i% ~
- E' U) `( m; `6 S& H/ R. S/* On smaller screens, decrease text size */1 |7 A) I& c( p! r B+ k: ^; [
@media only screen and (max-width: 300px) {" V, p3 w6 v7 q' R8 M6 F+ C% n
.prev, .next,.text {font-size: 11px}
: R$ b1 _; S/ ]& B% d* |% _}
[$ T9 s5 k# C* W* E5 u. G</style> U9 }5 u! z+ c: |; K4 }
</head>
) u# }* |6 H1 D: S<body>8 V9 a7 q. t9 j0 o6 h1 Q
, ~$ s- h. ~4 }: i v& m
<div class="slideshow-container">
0 [ @2 K5 N8 I( P& s/ l; `
6 O9 d% @; q0 P3 A<div class="mySlides fade">
! G @' L' s1 t7 M <div class="numbertext">1 / 3</div>
4 N) W6 I+ r) r" N. H/ m <img src="img_nature_wide.jpg" style="width:100%">
: P4 e0 N. P9 {0 m3 O; g1 u* j j! d <div class="text">Caption Text</div>
1 w* t [8 U. ~ Y0 }* ~; u6 i</div>) K; Y1 b/ D& u7 w
3 } g3 J- i7 ~% a
<div class="mySlides fade">
( S- }3 ^9 i- i+ l' Z <div class="numbertext">2 / 3</div>
1 [) H9 Z/ a$ y$ f <img src="img_snow_wide.jpg" style="width:100%">
9 ?4 F4 a. i' |) y% M9 i& s <div class="text">Caption Two</div>
) d: Y, m/ H+ h: [</div>
9 S- f5 y: N% B' m1 ~1 b8 u' l7 U0 {/ D- [
<div class="mySlides fade">1 j. W+ D" ~. O* e
<div class="numbertext">3 / 3</div>
9 a0 a( _! L& l$ t) I! O <img src="img_mountains_wide.jpg" style="width:100%">- F" U# \3 w5 L J! X1 M7 B8 ~
<div class="text">Caption Three</div>
; f& M( w0 F6 v# K) a</div>
6 T. U7 M$ Y' U5 `9 e# O! m7 T7 ^5 @& r6 x0 R' G! B
<a class="prev">❮</a>7 o8 c9 Z3 ?4 k$ V
<a class="next">❯</a>
0 E5 j+ Y8 x/ \: T! D
- y& M, i/ t( g( _2 I- o</div>( \4 U, }" v' E- b# e$ J
<br>8 B# u/ a! N" q. R- d
% t/ b8 X# F5 Y5 a. P, M6 ?( U' V- `* ?
<div style="text-align:center">
: I4 R9 u$ a7 Z7 p( i/ B2 R* a <span class="dot"></span>
& ?5 A. Y1 p. }9 _; x <span class="dot"></span>
8 d5 V; N6 u# g8 H9 S3 a: ~. d( | <span class="dot"></span>
* ?- ~' y5 X9 F</div>
* a4 R, L2 F) D( H+ p9 E- B6 X2 ]' ? ]1 Z$ q: \, \6 f
<script>
' K8 N9 o3 m! e! ?3 ~var slideIndex = 1;
, w8 I/ l/ t* y* Y/ E' SshowSlides(slideIndex);) R+ P2 N Y1 }" N" y+ ?
1 G, w( a$ S' w2 z m4 s$ y2 Ifunction plusSlides(n) {
! E$ g/ |1 D [) c showSlides(slideIndex += n);
' W& R- i) O7 P% G5 R8 b}0 @7 M8 H b# U8 o: }# V; q# n/ H% v
/ i! b9 |3 A( W7 V- Ifunction currentSlide(n) {: l/ {9 I" H& C6 \5 M
showSlides(slideIndex = n);
3 ^$ r8 \! O5 Z( g4 ~: s}! `( \$ I: k2 M/ D
. J2 y! e Z, q! L
function showSlides(n) {
) @% w9 f+ o/ m z) W8 U5 k$ k var i;
. P5 N3 }! |; r# k var slides = document.getElementsByClassName("mySlides");
' T9 [( n: A3 L9 c var dots = document.getElementsByClassName("dot");
6 e5 p0 {1 a7 D' Y1 p' Y6 ^% _7 d+ W- H if (n > slides.length) {slideIndex = 1}
0 y) A! e; X0 {. R1 \+ |1 D, F$ ]5 b if (n < 1) {slideIndex = slides.length}
- [4 S1 f4 h8 y/ j3 i9 \ for (i = 0; i < slides.length; i++) {
+ U$ n( w2 d" m2 h9 p, B7 n8 _ slides.style.display = "none";
/ o: {9 h/ x' z+ J3 g }
% g) T: d& y1 E, z) U' C6 ?8 @ for (i = 0; i < dots.length; i++) {
% [* C1 ~ ^7 Q( ]$ n/ d dots.className = dots.className.replace(" active", "");
% s6 j! d. z5 x D( L/ l }
0 \9 A$ e+ B* m |% ` slides[slideIndex-1].style.display = "block"; s7 c( \! u( @9 H: b5 d
dots[slideIndex-1].className += " active";
, l* A# L2 d0 K! {}
' I) j! V3 U5 |. D* F</script>
' g6 Z- d/ }4 z. T7 L" [3 q$ B$ \1 H! ^- W2 H R, \
</body>
) ?* o; x' j1 k& R6 }5 ~7 v</html>
|
|
楼主
），别说再去弄 JS 了，更何况只是个图片词典而已
