Trình chiếu ảnh

Mẩu 2

Mẩu 1

<div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEjRan9mKt7tW-n2GpuBy7ha6fausdiN6KjlTh_fn48eXJInKQMSdqnpV12VM16_NNJef3OGrIMYEBWfmeCzm5a3vuOEHsHJUfaXqEMpjf41Z0WhppABrlbnsM5p4dO1uI1ZTAiHUyg8/s320/Dat1.gif" width="300" height="400"/> <div class="text">Caption Text1</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjehW9PpvDQjXDcSdkp7tZCgqDEHjiVoz6Snfw5rYRpaYlzDtTwPNlNIMbkL_WCX-wfI7HKeL1SdWlnfCZvjZhe4UCGlUluaMFemHDoyWNxnuFBdQ1WLhldOXZzfTa9thcawO5VzDRmMY0/s320/Dat2.gif" width="300" height="400"/> <div class="text">Caption Two2</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMAFzkD3iOdXkLywFJr6rulbryDh4bv2IgGEdBOx2HDPtyu0UoeIp_Zd3le9uoO-HTmDyUpQyx2EvwPG9VL7IQ32peIRVvzc9DsnXg62I5eKEOGmmRSrAv0kSOsQPsC9vN1DECfruzBo/s1600/Dat3.gif" width="300" height="400"/> <div class="text">Caption Three3</div> </div> <div class="mySlides fade"> <div class="numbertext">4 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlOM99hJ_v_TC1pKBtRQXK8ZMoTqMwvWEUA_v-OwcudQXk8YDTezBOA3TDgLIRN3ji8Ocf8oNF9fx1ltlKyM7hJJkihsjuglTGwRo9OEXe0CwehgSUY6_uZ-mPVttLncc0d_Q9YXAte4/s1600/Dat4.gif" width="300" height="400"/> <div class="text">Caption Three4</div> </div> <div class="mySlides fade"> <div class="numbertext">5 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DEYl0Yek3K6h5M0ce_slArb0QSNPRzl_ubUL-QAIBC2GbrxcZZRGkEl0zaFo0O-NzLMbviaHUBGZr6F7d8QtrbuDSVwlEjdXFqyhhBItXji5HTBX5IJT3PE3FGuswVyI_c0wU2YVG_I/s1600/Dat5.gif" width="300" height="400"/> <div class="text">Caption Three5</div> </div> <div class="mySlides fade"> <div class="numbertext">6 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZehe5boY7eb1M2yhNis6fjDFScJ51cB5P3Xfpvgf209h7VJ3FTSF1ZkaV_bf-3dw-gppQJUxyC27zE1aqOVNq_278OIyGKJaaLdVPLmtZlT_Yd1WWqgQZ-wl6OIMAmQz-JRQZHtcv4tc/s320/Dat6.gif" width="300" height="400"/> <div class="text">Caption Three6</div> </div> <div class="mySlides fade"> <div class="numbertext">7 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSBZMy37AcTl6DtenMTwJm_ZFh4JgFGRDagT8w_oD2rbbmJpQJz5-Jhg8VSLGNA-PZkYU1u8dISKCElf-pDBz4ls52CN7WVim71J5f-AjF0j2KHV8aZkbnQXI071qMIRmNChiAektQoM/s1600/Dat7.gif" width="300" height="400"/> <div class="text">Caption Three7</div> </div> <div class="mySlides fade"> <div class="numbertext">8 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSWQSRKJXgE2ixNzvH4RebXKXG72N-g469QREOviKr9F215Zrl-Vj312TxgtOAVOddq1r9cNfZd4vaW7mT_uDrpHrb3wgfoStJ0yjdimEYVzTOYD9jpS55d5L3OGMAwIRNPyf62IL1X2c/s1600/Dat8.gif" width="300" height="400"/> <div class="text">Caption Three8</div> </div> <div class="mySlides fade"> <div class="numbertext">9 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoYzPvFHtO3d-CbibG8pLpjnG82U9deecRfsaQqBO4Xyi7SW89dPiHFOTBwXcyF0LYgCi_JMyDrfQxoKD3lBGO0xuT6B8Mres-Wgt4-Uk31DLrFoNjkhUQUqQ3WsFmxOXj9HHYnPlKIE/s1600/Dat9.gif" width="300" height="400"/> <div class="text">Caption Three9</div> </div> <div class="mySlides fade"> <div class="numbertext">10 / 10</div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-OLDNvy_GeDMTFcg944QC-IElkmu1C69A6vRSk-htTGfUZ56KF3_9ITxMMiM9KyUxgsxXpef_vPODBeN66aRp-1XtZ5exPwkP4vHvO6J13nYb6WQmx08ot2BtVRtrx6-xKsbh6lxs0D0/s320/Dat10.gif" width="300" height="400"/> <div class="text">Caption Three10</div> </div> </div> <br> <div style="text-align:center"> <span class="dot">1</span> <span class="dot">2</span> <span class="dot">3</span> <span class="dot">4</span> <span class="dot">5</span> <span class="dot">6</span> <span class="dot">7</span> <span class="dot">8</span> <span class="dot">9</span> <span class="dot">10</span> </div>

<style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;} .mySlides {display:none} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: left; } /* Number text (1/4 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 20px; width: 20px; margin: 0 2px; background-color: #00ffff; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #ff0000; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2.5s; animation-name: fade; animation-duration: 2.5s; } @-webkit-keyframes fade { from {opacity: 1.4} to {opacity: 1} } @keyframes fade { from {opacity: 1.4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } </style>

<script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 4000); // Change image every 2 seconds } </script>

1 / 10

Caption Text1

2 / 10

Caption Two2

3 / 10

Caption Three3

4 / 10

Caption Three4

5 / 10

Caption Three5

6 / 10

Caption Three6

7 / 10

Caption Three7

8 / 10

Caption Three8

9 / 10

Caption Three9

10 / 10

Caption Three10

1 2 3 4 5 6 7 8 9 10