TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑 7 Q) I$ z* e& v1 J
可以考慮用這個: r3 ^+ O# Q5 Y) S E' h1 F
照著套用應該是 OK 的
7 a! ]" ^7 ~( a# L
. @" |1 r5 @; K" f" xhttps://www.w3schools.com/howto/ ... tryhow_js_slideshow( l; r* U* P5 t+ w" b6 x
# \2 s r/ o9 z9 N
" }% r' p6 W: r! w3 S* s1 w: X) a3 ~ o9 A& `* V
<!DOCTYPE html>
- ^# _" }0 s2 y- _<html>( E+ O: A' S1 e5 Q$ l" }
<head> l& S3 S3 l" x4 m2 T; G: s1 f. Q5 i
<meta name="viewport" content="width=device-width, initial-scale=1">, a( G, x T+ [ {7 }" C" v8 e6 _$ V
<style>
7 C; }) n. ~! ?- T* _* {box-sizing: border-box}
1 N) {0 i( ?/ dbody {font-family: Verdana, sans-serif; margin:0}9 |4 b. r% v8 x* ^" @
.mySlides {display: none}
0 i: u, f. T+ R; _img {vertical-align: middle;}3 a# O9 P# N2 P t2 M2 S
! q3 B" }& h: s0 z2 J/* Slideshow container */
- U0 M! t$ t7 Y6 Y0 j; Y( P: _2 t5 N.slideshow-container {
( Z! Z7 H: Q9 F) Y1 F& Y max-width: 1000px;
' V" S* K7 u# W* c# h/ n- y position: relative;6 l4 G" G( {) k- O e# F1 L/ j0 y
margin: auto;" P) ^1 |: S$ q- C2 a. u2 I+ ]
}* }& v6 ^, W" |* S: H9 C; W
/ G; V! A# v& V$ G, O" i( h. j/* Next & previous buttons */
2 e5 d6 o; R. _& Y, }6 z; t: A.prev, .next {
7 n: R- R6 R+ p2 B; E7 {) F1 W cursor: pointer;4 u( A$ s8 v' C& d( t8 I o- r
position: absolute;3 X" a$ E; m0 G6 @" O
top: 50%;
0 u3 |. k8 i9 \8 o0 s4 T+ Y width: auto;; I5 t, f& }, C; I' w8 w0 a, t/ |
padding: 16px;2 r7 h8 L7 ]7 | S8 a: d# y: h
margin-top: -22px;
/ x& j9 g; v. a5 [9 f color: white;! z: P! o3 |! d; B2 A
font-weight: bold;
W0 e' e7 @! u( | font-size: 18px;& |5 w) v# ]2 `% Y6 m
transition: 0.6s ease;7 _6 L1 n) [7 R0 w) i1 ^3 Q
border-radius: 0 3px 3px 0;
; Y u) W y) h; d, o user-select: none;7 X( V1 e' A* ]
}: ^/ G2 `$ [" b3 q
, N6 P* r* p9 g0 D* Z! T/* Position the "next button" to the right */
' M# k4 X8 y% Z) H( G& z# y.next {) a5 E# w. k5 P( D, K4 }
right: 0;+ w# \0 q) I5 q; @* c' Q0 o8 l1 u* A
border-radius: 3px 0 0 3px;
# A+ _8 b B' Y7 m$ {}
~# n: j- q% j0 u* B8 T) d* ^9 h5 I+ s0 b
/* On hover, add a black background color with a little bit see-through */
& \$ j5 y' V/ F.prev:hover, .next:hover {
, C+ h | S9 O6 z4 J background-color: rgba(0,0,0,0.8);5 d; s( e8 u- i" d4 G
}
: t% a8 n$ f! ^: }+ z0 m7 {
/ R T! j; e3 e8 H3 |( x! \7 L* p/* Caption text */' V o+ q5 u) a n3 m
.text {
1 R( G5 t3 y2 d5 o/ {7 S& ^ color: #f2f2f2;! W# A k K0 }* B$ Q# v' n1 P! ?
font-size: 15px;
) J5 r/ ? _2 R% i. p+ t! t8 U padding: 8px 12px;
- ? X2 {6 v" y( x position: absolute;
2 K# E- u5 s; t) y0 m6 t$ f7 Y bottom: 8px;
1 O4 s' {* P0 ~: t! t width: 100%;
$ L/ }/ z" o) @4 ^& V1 O) A" C' _ i" i text-align: center;
. U" I4 o$ m: Y# N5 r0 e3 ^}
" a/ w' v! H) n1 `1 V
$ h* U T; J$ ~4 f9 w/ s+ ]6 p/* Number text (1/3 etc) */
# c; ~9 x. h0 L( t- c$ }.numbertext {
4 e5 e" u& ]- Q3 H; ]5 t color: #f2f2f2;7 G o. L2 A0 s: l* f/ }3 l+ z
font-size: 12px;
: o2 x0 }# M! s7 J3 P padding: 8px 12px;
0 l. n: z! C) ~7 Y1 h position: absolute;# j& X- ~( ~& O+ Q
top: 0;8 y1 @: a% r" I! a- K
}1 S. D/ W6 a7 }) \' b( |. F: P
( B7 L& ^" N, e! f6 A5 b
/* The dots/bullets/indicators */
6 X* j# r; p6 P8 ^6 W( P+ T.dot {
3 G+ I% Z" J4 s4 R. b+ L! R cursor: pointer;
# J1 k' p! |; o: A6 U/ S height: 15px;
/ _; S# Q- B! V) I width: 15px;
! h( h, ]" z: p$ ~) `9 a6 U2 Y margin: 0 2px;7 f! A3 q! j6 `
background-color: #bbb;. g2 F! p6 ?3 C8 I6 s/ F
border-radius: 50%;0 E+ w' P, N, k" K( o
display: inline-block;: y/ {) K7 A0 K2 J* p8 i9 s8 n' b1 K
transition: background-color 0.6s ease;
5 D+ r$ ^/ r+ f6 G- h}& r% E6 p* L& B: p6 R: ~& [
5 m2 S" C" ]( J2 k.active, .dot:hover { B4 e, O% \8 S+ F& T' j
background-color: #717171;7 ?' S! n3 I$ y! h* M: y, v# j7 [
}0 S' S& f" z, ?3 W Z
' l/ H' S U& b7 G' P/* Fading animation */+ i4 F! j' n6 B1 K
.fade {; z8 o& c& W3 `4 H
-webkit-animation-name: fade;; I4 a0 \" X& |( j- e! p
-webkit-animation-duration: 1.5s;
9 T9 p- P) E `) g' } animation-name: fade;
) ~8 V0 `- J3 a, M animation-duration: 1.5s;( d( u$ Q% c3 c( m$ N; B
}/ d1 }/ B: `( Z7 f* t
5 m- @# a' ?% h& n, X
@-webkit-keyframes fade {# R# S9 I* x, X
from {opacity: .4}
7 G3 c* h+ ^; o6 y to {opacity: 1}
( A$ ? `8 K0 [+ w l f- ?6 w}
4 @' I' y- s2 ?' ^7 E( n* \ O; Z q5 E9 W
@keyframes fade {9 X3 d; e; o) |, w* q% m
from {opacity: .4}
* I# d( a- B& e; }$ R @ to {opacity: 1}* E- e/ {/ o3 |) {% b/ a' K9 X! S
}
$ B# Q1 F( ^7 e$ u" r6 ?4 Y A: C8 H! Q. {* ? A9 d' k! e$ M9 y1 {; K
/* On smaller screens, decrease text size */; W: F$ B. B9 j
@media only screen and (max-width: 300px) {7 T0 Y4 c- P! F. J' R
.prev, .next,.text {font-size: 11px}
# Z, ?9 q4 S& ^ S9 q2 Q) `+ t8 Z}
9 T) U4 U: I! |' C</style>% c1 m0 n. \2 z$ M2 H! ~6 ^
</head>
8 i3 E& O8 ]3 ]; |! Q& z$ ^) N<body>; J+ O7 s$ X8 A# f6 K3 t8 T& y
! j% p+ Z$ V4 a, I3 j+ ?1 h
<div class="slideshow-container">+ G8 k& c W- K7 v9 Y9 L. _
- j2 u( j/ L6 A2 f, k3 Z* v
<div class="mySlides fade">. O1 Y& s" w/ M: v( K8 t
<div class="numbertext">1 / 3</div>: k# o8 r5 L$ F' N
<img src="img_nature_wide.jpg" style="width:100%">( ^7 U+ B2 S" w
<div class="text">Caption Text</div>
* t* r* O( b0 P p</div>; |+ N) P. m5 ~( }: b& _. m! I
: t, |, O$ L; G<div class="mySlides fade">9 B9 r0 h; L- p/ T; G( O
<div class="numbertext">2 / 3</div>
) X9 y8 N( p; E8 \" J: b <img src="img_snow_wide.jpg" style="width:100%"> f* @4 }$ q4 E6 U U
<div class="text">Caption Two</div>
; \/ A7 u3 @" o0 M2 r8 v3 h3 F</div>
7 g9 f8 K" Y7 ^9 B" E- L2 Z" y- I) t1 q8 |
<div class="mySlides fade">" N. g9 k; l' \# x4 P5 p( d0 M
<div class="numbertext">3 / 3</div>: J: g+ j. Z0 H2 E2 W/ O5 k
<img src="img_mountains_wide.jpg" style="width:100%">
5 g5 T" b* s' D <div class="text">Caption Three</div>
; O( {, @7 \3 n) o A" X</div>
' p* R) P1 z. [5 ?. B/ f+ J( X# O9 I1 M: v4 L1 w
<a class="prev">❮</a>5 a6 ?+ p1 W7 N& x
<a class="next">❯</a>
' ?$ K N" F4 T. f" z7 l
t- R: z" a) F7 p</div>
' N* q6 k1 x, M( g; l& ?<br>3 N$ G/ [( _7 J, ^$ ]
4 v. h, M' @/ i: w<div style="text-align:center">5 }# J1 J1 S. ?; L. y
<span class="dot"></span>
; Q \3 A4 q, \. m: H <span class="dot"></span> ; G9 T, c' r/ d% c e. Y, A
<span class="dot"></span> " s/ D& F* M" \" c: }# E5 H; {
</div>8 P% ?& |) s/ {( C3 H) G
h: f. g$ G1 j! S0 B6 y `<script>
, k4 U' R: e1 a' Fvar slideIndex = 1;
( w' I7 G: Q0 k( o' J! A( Z: F5 hshowSlides(slideIndex);: e) `1 k4 r2 t
3 B4 T& I* d# [* U6 g
function plusSlides(n) {
$ Q: h' x* o" _5 V6 b1 c# u showSlides(slideIndex += n);
; I9 a$ C4 h; N2 h3 Y% Q- u}2 B( |1 Z. E1 [6 h* `) [8 e1 j
" ~- w* Z- A7 h$ P
function currentSlide(n) {% F8 I- P r6 [4 l( D2 m. p
showSlides(slideIndex = n);5 b+ N# w/ h% y* g" i
}# ~0 b2 e& N4 a8 \7 a3 [# X
$ P" o, n1 P5 d; R8 d6 I; _function showSlides(n) {
5 v. x8 R8 [* ^0 I k var i;
+ s) s3 A Z% c$ e- _4 m var slides = document.getElementsByClassName("mySlides");
% A. A5 R! A' t% R4 s3 k8 ?# T var dots = document.getElementsByClassName("dot");
, B. A7 u u ~/ r! z if (n > slides.length) {slideIndex = 1}
" d" i- S1 C, {* w6 d if (n < 1) {slideIndex = slides.length} ^, e7 [' d# a# \# s: H
for (i = 0; i < slides.length; i++) {/ j/ J$ Z4 N6 u, Q
slides.style.display = "none"; 7 Y( _) I5 W& Q$ W6 V) J
}8 t+ Y8 |" P O$ R
for (i = 0; i < dots.length; i++) {# |1 E7 f$ u3 @# `) U% [
dots.className = dots.className.replace(" active", "");
- P1 S! q# \* j }7 B+ ]9 ]: Z: ^0 V2 K5 d/ D
slides[slideIndex-1].style.display = "block";
+ c# I( C; T, s2 | dots[slideIndex-1].className += " active";: s+ u3 h' ~8 h/ M p7 v: k" U
}' j& y% {, p0 X+ Y ]
</script>, _. w' G$ K4 F
3 B8 i" z. m4 p/ g R# l# K0 f
</body>
3 _$ i, z% H" M# L</html>
|
|
楼主: starmars
楼主
