TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
发表于 2020-8-30 21:52:01
|
显示全部楼层
本帖最后由 喬治兄 于 2020-8-30 21:57 编辑
; E! {0 Z8 B9 U" O! X1 k* e+ l可以考慮用這個1 ^. G# L0 t5 S; A0 y4 c s$ J
照著套用應該是 OK 的$ i. {( x8 C/ N4 u& T
5 A$ s4 q" ~- ]* @4 U$ v
https://www.w3schools.com/howto/ ... tryhow_js_slideshow# E( \5 R) _* }
' U. \1 K4 Y' l# l- Q
7 \2 C# `5 G7 J& M2 D
$ u* ?9 ^; {7 b8 I( v# u0 ^<!DOCTYPE html>
( Y2 |' V" {' h<html>
( f) P+ {; y: Y7 r6 m% a<head>
% I3 R$ ^$ \7 ?4 g& j/ E<meta name="viewport" content="width=device-width, initial-scale=1">
j5 e# j0 V3 o& C) ~<style>' A1 H( o" x# j% q& o( l7 D9 m
* {box-sizing: border-box}
, O& K8 |* Z- H8 Abody {font-family: Verdana, sans-serif; margin:0}
, O- h& J$ v* d' Y+ W0 Q! z.mySlides {display: none}
9 `* ^# |4 t8 h9 d0 `7 z% W4 bimg {vertical-align: middle;}" c( m% Z6 S+ y8 w
Y+ z5 T( f9 }4 |
/* Slideshow container */6 L& H/ f6 _/ S0 v% c3 Y9 [
.slideshow-container {3 ]& i% e' _6 P) |4 N- o
max-width: 1000px;; M+ ]# N$ S5 S5 m
position: relative;
/ o, x6 N" @, r) K margin: auto;/ a) A9 T7 f. V4 ~. e- N/ F
}
+ @% T! n- x1 G" y/ \
8 S, q9 J! l8 |9 b. P/* Next & previous buttons */, o! j F; o3 n% j" X# L, n
.prev, .next {
" L' R2 K! F- L. g# A cursor: pointer;
0 U) [2 U4 N, z position: absolute;
; a) S' ]( W# P3 I, d top: 50%;
4 o( N7 R9 F: C) t width: auto;
/ D! l; u9 N8 c4 y padding: 16px;( P4 `2 t" P: |2 G
margin-top: -22px;2 Q4 X& w6 h; f4 V Q' \" B
color: white; p8 v6 l$ H9 c+ f
font-weight: bold;6 p: t" N; h/ _
font-size: 18px;
3 u3 `) d: s' |2 ~' @4 b transition: 0.6s ease;% J4 g3 r) n$ `/ I5 q. E; h% {, H
border-radius: 0 3px 3px 0;, C! E" E$ z ^2 K8 f
user-select: none;8 J( S. n" V6 S: t- D3 D7 C
}! k- S+ o {: m# d; x0 W
/ f9 a) \# z7 u5 A( M
/* Position the "next button" to the right */$ A5 y Z8 H- P9 R0 x8 u/ M
.next {
# O$ \' F3 ~+ k5 U! y right: 0;( B6 L3 W/ b" L* ^" S. @
border-radius: 3px 0 0 3px;
, V: Y! u. }, g# F! l}4 b5 c4 o. N, F' f* O8 l
) K1 X& W$ }# \& y
/* On hover, add a black background color with a little bit see-through */# @( `; g% l: D6 l1 ]% b/ S" i7 n. {
.prev:hover, .next:hover {2 x0 q7 w5 N1 q1 s( n
background-color: rgba(0,0,0,0.8);
4 q* m; [5 o2 D% k} o) F' w4 D/ ^* j7 A+ \
/ ?, O# f- U9 M9 t, |0 H/* Caption text */$ @( x8 [8 d& T4 X6 E$ W" O
.text {
( S& ~& s5 ~+ G; r3 E k% }/ ` color: #f2f2f2;
y5 @$ B0 R+ H' |2 u font-size: 15px;% Y* w J1 K3 O1 S$ `
padding: 8px 12px;
1 @. {- a. h6 n) h8 F: M1 ? position: absolute;% b5 z& y' m3 S/ i6 T, D
bottom: 8px;
4 `; C- g4 g1 [* d3 l, R/ I, p8 d width: 100%;9 @% A8 z) _ e# Y+ d
text-align: center;4 e6 r* t7 n; T( C
}
9 U/ e+ p; t& y* a9 W& d |5 J; ~$ B9 Q! y" L% f3 }* O
/* Number text (1/3 etc) */
' J/ G! z( o8 D.numbertext {
3 t" y! a, f0 K) D color: #f2f2f2;( ^+ R% q6 |3 n. y
font-size: 12px;
. x6 ^* @9 c# V5 q& \ padding: 8px 12px;
: E. B, _/ F4 `7 y! M# b) V position: absolute;
3 J3 f' D+ X* x) V5 N. G top: 0;& h$ ?& o u5 K3 D% Z3 j
}
0 i2 s, P5 O8 ~7 C" \& y, Z
4 e3 v6 n- K" A4 L) S" O; }4 y) k/* The dots/bullets/indicators */
: \# N# D) P. ~1 l) }4 }' w.dot {
, W% X- H D4 G+ H c6 ~+ C6 | cursor: pointer;
1 D7 Q+ t" Y5 D3 n+ u7 V" N height: 15px;% x; k9 F$ {# C& R& r
width: 15px;$ u% n1 {+ ~ T( P$ `' |
margin: 0 2px;6 \- I) w: {1 t7 z) d
background-color: #bbb;) F6 E2 F! T5 O4 f+ ^
border-radius: 50%;: B! i8 V0 J& P9 V' r+ X+ E
display: inline-block;
: f: \/ C2 b8 H' x transition: background-color 0.6s ease;
6 V5 W5 Z" v$ B; A. i' A3 e}$ U+ v7 ^8 Z4 ~+ c, ` g8 K
% f1 e, Y7 u6 N4 N6 k7 f.active, .dot:hover {# n0 R- a9 }+ C7 Y1 w1 p- y5 l
background-color: #717171;; q- ]+ a" C" i! F
}! o& m, s2 E- m. I+ e
: U/ l0 T4 G' S& p, }2 H/* Fading animation */
1 n) ~2 p6 C( i% t3 A.fade {
5 j) Z% B" k# |$ }1 N -webkit-animation-name: fade;
+ w! L' P5 C! W, B* U8 a9 @5 a -webkit-animation-duration: 1.5s;
9 \% C& D5 z/ v' Q animation-name: fade;
2 _+ ?# l% A) w+ S# R- u0 o/ j animation-duration: 1.5s;! W# `. ?; N( y6 d
}7 S% A/ }0 y; F5 o/ Y( a
: P6 H7 ?% {/ A0 I( h' h@-webkit-keyframes fade {# g, E! ]7 H, o
from {opacity: .4}
! G, c4 g- G! M8 Z% d& W% g to {opacity: 1}2 U( z* z# u: B; {) {$ |: V% T w
}+ b1 n+ v) Y3 H! @9 @) R# @$ I' ]
2 Q: o# N/ x* ^5 j+ g
@keyframes fade {
5 z8 s) W5 `) h8 X' h from {opacity: .4}
) \7 Z' r9 t$ B( S to {opacity: 1}6 u6 W9 s6 b- Z' l
}
, }( g- g- W9 Z; I z2 B4 [ @5 G: W8 L! x6 i
/* On smaller screens, decrease text size */4 r# K( n4 b- V
@media only screen and (max-width: 300px) {
, }0 A0 U! c& L3 P .prev, .next,.text {font-size: 11px}3 e6 Y0 t/ K9 @0 Y9 d0 f0 y- d
}6 k) t+ q8 k7 Y
</style>5 a; Q4 h8 D- E9 J9 S
</head>
" K% Q* f$ ]- w; w1 f6 M; O% G<body>
8 z4 q& l. H( r/ \9 U+ g. O' I; S% P: g& [1 p
<div class="slideshow-container"># l$ j& U+ x6 f$ s4 c% v: ~& |$ e
( e! ]8 i0 \3 F3 \, Q4 _8 ^; s
<div class="mySlides fade">* {+ V' p w4 w/ J$ g ^" v. U
<div class="numbertext">1 / 3</div>3 ^$ y/ h9 {* U& p
<img src="img_nature_wide.jpg" style="width:100%">5 W2 h; r( r; g0 A6 T4 ?7 w3 |
<div class="text">Caption Text</div>
$ W8 ^! x. b; }</div>) i3 h; X. \1 b
% H) V8 V, Z8 T& v0 e9 U' l. m, l
<div class="mySlides fade">+ ~0 L& W- o0 X w+ C6 \
<div class="numbertext">2 / 3</div>
2 d4 l G" k1 E7 g <img src="img_snow_wide.jpg" style="width:100%">. F* g' H, U- n$ |+ U4 I( U
<div class="text">Caption Two</div>) A2 C* d) ^' _* @+ M1 y
</div>
) @9 z/ x' G$ \' l/ E% o9 ~6 i% L4 H" {2 R
<div class="mySlides fade">
+ E3 U2 H& c$ b8 ~. y+ w" O0 g- ?& \% f <div class="numbertext">3 / 3</div>
: @* O E$ r3 a2 V <img src="img_mountains_wide.jpg" style="width:100%">" R( o) K+ F N
<div class="text">Caption Three</div>
; }3 `, }) w( l3 R</div>
' O& O, b5 F- g/ o& C/ ?! P7 E+ s% `, K0 J& W
<a class="prev">❮</a>
" I! u& B+ {6 o% q- g<a class="next">❯</a>
# h; K: T+ x+ v) V1 h( O
1 |- D) c# L6 z; I# Q+ o; t `</div>% l7 A5 n w! s& F
<br>! o% y# i. A# b; s; x6 O3 g- Z8 T
! |$ o) Y; t( H+ M4 h<div style="text-align:center">( X: d+ u* l o9 r# y$ K
<span class="dot"></span>
- X- y) r! ^- l7 E. [8 L9 E <span class="dot"></span> 0 t* |) Y. o* @
<span class="dot"></span> 1 o6 X+ q9 G, f
</div>: ?4 O4 x$ z0 m/ R# O. O8 R
% h# F1 {# [, V
<script>
% X/ D+ m0 D tvar slideIndex = 1;
' |7 j! }5 c, I3 s/ f. ]( N6 zshowSlides(slideIndex);
3 M, g- Y. X. E/ n% \4 k% C
- o" S& T: w. L5 Sfunction plusSlides(n) {
; s8 a9 ^& z8 Z: a8 k showSlides(slideIndex += n);5 B% Y# d/ u, Z' [) E" P+ i& X+ ~4 r
}5 ^+ R x) d% D H! \4 X
' ? C: }% k+ S% {0 r* O8 n, zfunction currentSlide(n) {# |9 Z6 h7 W6 G2 O- C8 L
showSlides(slideIndex = n);
+ N! L! P% r5 C. ^: ?}
% i4 ]5 b1 Q# a" B* `" k
7 v0 ^9 H: M' g4 F4 Ufunction showSlides(n) {5 M: @ J2 w. I3 m, Y/ {1 o7 G
var i;, D- n7 U4 N& a. o8 s
var slides = document.getElementsByClassName("mySlides");
6 F1 M9 ~3 u3 | var dots = document.getElementsByClassName("dot");
6 U' a8 `4 n; K# _ if (n > slides.length) {slideIndex = 1}
+ ?7 H% x" ]' r0 U if (n < 1) {slideIndex = slides.length}
+ Z. f$ l8 Q; ^; t5 h X3 x for (i = 0; i < slides.length; i++) {* f# W j j5 Q% F& {: V: b% _, n
slides.style.display = "none"; 4 C* ~6 ^" W) b& d6 ]8 W
}
+ R5 a! o+ V! h% ]; _ for (i = 0; i < dots.length; i++) {' F; \7 H C, N# F# i$ W
dots.className = dots.className.replace(" active", "");3 ]* m$ Q% { f; `6 X
}
) ?: z [* t2 p4 m" |$ s slides[slideIndex-1].style.display = "block";
' E) e* ~( i C/ y* o, m dots[slideIndex-1].className += " active";2 f- a4 s" _$ ]7 H" m
}
: U' f) n! R) ]1 ^0 i</script>
+ x9 B$ y) a% Q% K( Q" q
, p% I& x, K# w; }6 i8 `" e8 W</body>
8 j! W' w. ~) J) \- J& I& G</html>
$ ?* l6 |8 k# A, y2 f |
|
楼主: starmars
楼主
