TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑 8 J/ p2 \$ a" h( {; Q
可以考慮用這個" [0 O# e; A9 c8 n/ M) ], J9 g
照著套用應該是 OK 的9 I+ U/ B h! v; R2 R2 c
5 [/ }. h) ]+ s$ r( e- T! H H! thttps://www.w3schools.com/howto/ ... tryhow_js_slideshow9 c$ D) r4 c' c( ~8 }
8 U6 z" C: m4 ^' @0 o- v% l % g E! O/ t. x5 \! N
. i$ K- c1 H: }# S8 I9 w" I+ Q<!DOCTYPE html>
6 t, o8 L+ u3 J<html>( Q7 ~6 m5 ^, b! D0 i4 Y
<head>" c& a( e P0 b2 v9 o1 V, t
<meta name="viewport" content="width=device-width, initial-scale=1">( g$ z: J5 L! K/ r7 Q4 O
<style>
# u3 C: q4 |1 Y \% q/ m* {box-sizing: border-box}/ {* h+ M6 m6 ~) y h; w8 l- k# j
body {font-family: Verdana, sans-serif; margin:0}- B% J/ T4 Y0 }5 N8 Z
.mySlides {display: none}
% ~% x, ]5 }: Timg {vertical-align: middle;}/ B& i: ?) j1 N5 a2 `* t: y
4 z9 t* B# Z" Y7 c& n7 d
/* Slideshow container */
, }& `" M" m4 j.slideshow-container {
1 q3 \1 d* \/ }7 S. ?1 L1 p8 \# C max-width: 1000px;
$ N$ v0 x3 z4 N# e position: relative;0 A3 p: n9 T- w3 p! N
margin: auto;
0 S8 d* c: X/ H}
2 P+ u" |. o: ]0 p' U: e5 x h: X, \ V5 E0 y- o8 _1 y
/* Next & previous buttons */& [6 \4 `" }' e3 ^' Z9 N' M0 a5 P
.prev, .next {
~4 Y' E( u9 G6 C$ v1 H cursor: pointer;
2 J% G: c6 T) J9 o% L* [3 ^ position: absolute;; s$ Y- O1 J5 b9 K0 K
top: 50%;! c& {+ H6 q4 f* u0 _* D( D
width: auto;+ K; T' a9 B, W$ M0 {( l1 i+ N- M5 S" B( @
padding: 16px;" I- z4 ~- B2 Z8 [% I! j8 m$ ?, X; K8 I
margin-top: -22px;
: w; i1 B: V$ D* _ color: white;
5 l2 H9 n3 v' x: j font-weight: bold;
3 Y3 P4 N( Z& v- F! K font-size: 18px;
& U! r* D* v: R. C transition: 0.6s ease;
2 p) v* i6 ^( X8 t" [ border-radius: 0 3px 3px 0;
* L0 V* C' L6 [ L: [ user-select: none;" e+ E6 Q) F, ]( G! L' b
}5 j) v9 f: D) [) I/ h- x9 K/ w' O
' W8 ~, a- s2 ]2 F
/* Position the "next button" to the right */& ~. H4 e& N6 x: j5 w
.next {' X/ M3 X7 F- l7 g* L5 ]) g3 f" y8 Q
right: 0;
0 G' g( H X$ b border-radius: 3px 0 0 3px;
5 _/ {- H: r/ H4 w/ p( {3 q6 A( n}
2 u# Q6 L l5 Z4 c/ E" u/ `' X: b5 z2 Z5 u% [5 l1 E
/* On hover, add a black background color with a little bit see-through */# a5 v6 g6 G4 {8 b: u8 D0 [# l
.prev:hover, .next:hover {
6 ^, W3 O' w3 B& d- e background-color: rgba(0,0,0,0.8);
+ }. g M8 I, d) w; [' w}7 K) @$ _" t( H5 i. N: O' W0 c
: E: j" M/ e2 w" q
/* Caption text */
. `: b! f, }% ^ p( _.text {$ d* q& |5 m* W2 @6 V
color: #f2f2f2;
7 T& y" L, g. G& j: b font-size: 15px;
' X- u, `" M8 m# Y& n# O padding: 8px 12px;4 z' z: v2 K4 T! A
position: absolute;. Z: M L# I( Z7 @1 t
bottom: 8px;
% M: `. Z+ p$ Z: h width: 100%;% |' T& z9 f9 M/ l% v! S( ^
text-align: center;
a$ j2 s& ~$ \3 y! z" t! p } ?}
6 z0 g6 ]3 [' m+ K/ [
; |; q1 c) {# @3 n/* Number text (1/3 etc) */
F0 {9 W. u8 m) N.numbertext {
0 v" G' k* c# X3 x color: #f2f2f2;
+ \, E3 V' g* T# z font-size: 12px;
* y) R! d- i0 ~ padding: 8px 12px;
# e4 M6 Y% R S) O position: absolute;5 |; u$ Q# \9 m! O. }
top: 0; ` j. P; Z7 o/ L' `, o3 g9 ^
}7 S2 H# g7 {: h
& f+ n' y. p! a( b- T+ ~: f. j* n
/* The dots/bullets/indicators */
: N& t n( j5 A$ L; H$ c! U4 B.dot {
& h2 O' ?1 w9 M cursor: pointer;' r1 K4 n0 N9 W4 D% g% q
height: 15px;
! J2 k8 w" i5 U7 N8 z3 J width: 15px;
& v. L1 I" C8 {- X margin: 0 2px;
/ T, S' |+ c5 S. w9 Z background-color: #bbb;
+ ^( {. k, y1 B4 { h border-radius: 50%;0 M6 N( l, ?+ U+ \9 g3 M1 Y
display: inline-block;
! B7 h2 b$ T7 P7 R9 p transition: background-color 0.6s ease;
, L8 x' h* |, k) Z8 x1 d* J}# L r, k! ]$ v/ W d2 c& M
4 ~7 U' I$ F6 Z0 t0 b.active, .dot:hover {+ ]8 W: g; L$ `. N7 o2 z3 |, {
background-color: #717171;4 I& a! k: S2 K% X
}9 |1 n; E' n* A- S. k
! i. Z5 l8 O# [: r
/* Fading animation */7 m$ G N2 ?% }: s
.fade {
4 C1 ?4 g# E9 j! l -webkit-animation-name: fade;
9 s+ S& P" ~4 J# u -webkit-animation-duration: 1.5s;
- N, K* K7 O, ~3 q7 o* ~ animation-name: fade;
& f9 Z$ [# L8 N4 j animation-duration: 1.5s;
, c1 f$ }/ {5 z, j$ r# B}+ x# _3 U6 ^+ x( K8 |
1 p) [3 W# ?( y* i4 r
@-webkit-keyframes fade {
( F+ ~1 E5 x2 c9 @1 r: D from {opacity: .4}
/ m0 _: ~& X, L$ G; q6 o( T to {opacity: 1}
@7 d- ~7 ~- M# ^* E" ~/ a' H}
/ V5 m6 u* E2 t' U$ k) o% i/ [; {# U
; }7 D. J! K' X) Z9 w) [@keyframes fade {+ g; b. _ D' M+ v! J! _7 B
from {opacity: .4}
6 U4 X* x) u1 J( F to {opacity: 1}, o* k; [: G3 f! C
}: v9 F7 I& g3 r9 V! O- U
: K5 P4 R7 L$ L5 r/* On smaller screens, decrease text size */
$ s! c7 X2 @. ~& J v% j@media only screen and (max-width: 300px) {
2 H) |- W* u/ {7 X: ~& Z) y .prev, .next,.text {font-size: 11px}
4 z. o4 s8 u7 l' r5 b$ |}
* \: ~$ G# J. z7 y" A) ?</style>9 i4 a8 Q" f# B5 d3 n8 U
</head># w8 W1 x9 G# S( B+ u* {- R
<body>4 H! O% e0 B) E, M/ J$ V9 V
. @- G3 O8 V( i( M
<div class="slideshow-container">. C% U' N. t8 E3 Z
) n4 m! f( ?5 v2 `7 n! y$ o<div class="mySlides fade">9 i' p, w) H& i6 |3 c U: `1 |8 @
<div class="numbertext">1 / 3</div> A/ h/ _3 ^9 y
<img src="img_nature_wide.jpg" style="width:100%">- n1 d9 @2 C- C
<div class="text">Caption Text</div>! W0 I: |; E$ h3 q( t
</div>
* n7 }2 d. k9 \4 n" D8 S. p; U+ G1 v3 z1 v0 P2 E+ b* P
<div class="mySlides fade">8 G3 T% a2 {. V" P' h
<div class="numbertext">2 / 3</div>' }0 }. c/ p* H( d9 P' t
<img src="img_snow_wide.jpg" style="width:100%">, ?+ z+ R4 f+ n
<div class="text">Caption Two</div>- L) K( o: K) M
</div>
4 I, u$ h4 |+ @8 l9 s+ D
6 t" o$ l) \8 B) s7 m: Y<div class="mySlides fade">' w [* p$ g0 r! X; J
<div class="numbertext">3 / 3</div>
; q4 S+ _2 O5 B* @9 m <img src="img_mountains_wide.jpg" style="width:100%">7 x9 K9 u% }/ I2 |0 E
<div class="text">Caption Three</div>8 a4 A, n5 o8 ^0 v
</div>4 P4 x$ j* { t5 R4 f+ u& B* k
/ w" e7 ]4 k# `3 ]) L+ G4 b1 g
<a class="prev">❮</a>
- }1 p6 k2 `0 P$ Q$ t) A<a class="next">❯</a>
- i/ P; G) y |7 L
/ D0 y( y5 D) t4 O</div>
, O2 o- Q0 F+ n! w( c2 U<br>2 X1 H; E4 l: P' R
. @* T8 I; Q2 i% s( k2 c, I
<div style="text-align:center">
, U& J) K7 ?7 `9 L& N# m <span class="dot"></span> $ M( c% V8 {# Q( r
<span class="dot"></span> * l2 j, P( Y" J
<span class="dot"></span>
; e# P) K z2 Q' O</div>5 A5 M" B. e# V8 { R3 K7 J ^7 x# ?
( ^% x: {' u( I4 n( P1 C' m# G
<script>: \! v1 s- o: B4 H" u; S9 s
var slideIndex = 1;
) B( f# | r- C5 s/ t/ O: SshowSlides(slideIndex);7 a) B% v' V6 n) U/ V6 |
8 h6 i& a2 E: V3 o2 ffunction plusSlides(n) {" ~& z4 _+ {9 f9 e6 p# V
showSlides(slideIndex += n);. {5 ?3 D: O: c! P/ K, o
}
9 ?# g) \# n. B* a+ U' V% I. Q$ `2 w) c0 x( t N3 F$ K% Y4 L$ o; v+ I# Y+ m
function currentSlide(n) {' M! U; T# D) P; |8 G: \% H2 C
showSlides(slideIndex = n);
9 V( g6 g/ o9 j) E}9 P5 R( z, {' e( U; x. p
2 ]7 i! d* _& I' ]* B, ]1 Zfunction showSlides(n) {
5 A& C( w( J: g! }- F- d n5 q var i;
9 q7 g6 Y/ O/ T8 R6 e" G var slides = document.getElementsByClassName("mySlides");2 T' h. z5 H1 Q
var dots = document.getElementsByClassName("dot");4 C! ^( {* w4 M( @. S
if (n > slides.length) {slideIndex = 1} # d6 {; \8 l2 _7 @3 `
if (n < 1) {slideIndex = slides.length}
+ J4 w& B9 _: X+ q for (i = 0; i < slides.length; i++) {1 k, `3 x9 X! ?4 x8 M. O5 j- C
slides.style.display = "none";
$ U4 T) V" v8 x' P" T }- w2 z* `7 D# b& U" D
for (i = 0; i < dots.length; i++) {
* b _0 z3 I/ i1 J dots.className = dots.className.replace(" active", "");
2 I8 U% @6 w/ G& R& @ }1 s* K. z& n% X4 I3 c
slides[slideIndex-1].style.display = "block"; * ~) W5 [+ B/ ]6 i/ ?) ^
dots[slideIndex-1].className += " active";: k% ?/ x1 V; r# p& M' ]
}
5 }; n7 g5 u/ W6 x/ l3 }6 v</script>" H8 B, C! |( {3 d
4 V/ K' l* P$ z
</body>
+ K0 v" A; T8 {* n* L6 e1 t9 Q</html>
" i5 I: f1 @4 m; I" D( _3 a4 q# X |
|
楼主: starmars
楼主
