Hướng dẫn tạo Slideshow với HTML, CSS và Javascript - Demo RUN
​x
 
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <style>
6
          * {
7
            box-sizing:border-box
8
          }
9
          h2 {
10
            text-align: center;
11
          }
12
          /* Slideshow container */
13
          .slideshow-container {
14
            max-width: 500px;
15
            position: relative;
16
            margin: auto;
17
          }
18
          /* Ẩn các slider */
19
          .mySlides {
20
              display: none;
21
          }
22
          /* Định dạng nội dung Caption */
23
          .text {
24
            color: #f2f2f2;
25
            font-size: 15px;
26
            padding: 8px 12px;
27
            position: absolute;
28
            bottom: 8px;
29
            width: 100%;
30
            text-align: center;
31
          }
32
​
33
          /* định dạng các chấm chuyển đổi các slide */
34
          .dot {
35
            cursor:pointer;
36
            height: 13px;
37
            width: 13px;
38
            margin: 0 2px;
39
            background-color: #bbb;
40
            border-radius: 50%;
41
            display: inline-block;
42
            transition: background-color 0.6s ease;
43
          }
44
          /* khi được hover, active đổi màu nền */
45
          .active, .dot:hover {
46
            background-color: #717171;
47
          }
48
​
49
          /* Thêm hiệu ứng khi chuyển đổi các slide */
50
          .fade {
51
            -webkit-animation-name: fade;
52
            -webkit-animation-duration: 3s;
53
            animation-name: fade;
54
            animation-duration: 3s;
55
          }
56
​
57
          @-webkit-keyframes fade {
58
            from {opacity: .4}
59
            to {opacity: 1}
60
          }
61
​
62
          @keyframes fade {
63
            from {opacity: .4}
64
            to {opacity: 1}
65
          }
66
        </style>
67
    </head>
68
    <body>
69
      <div class="slideshow-container">
70
        <h2>Freetus.net hướng dẫn tạo slideShow đơn giản</h2>
71
        <div class="mySlides fade">
72
          <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-1.jpg" style="width:100%">
73
          <div class="text">Nội dung caption của slide đầu tiên!</div>
74
        </div>
75
​
76
        <div class="mySlides fade">
77
          <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-2.jpg" style="width:100%">
78
          <div class="text">Nội dung caption của slide thứ 2!</div>
79
        </div>
80
​
81
        <div class="mySlides fade">
82
          <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-3.jpg" style="width:100%">
83
          <div class="text">Nội dung caption của slide thứ 3!</div>
84
        </div>
85
      </div>
86
      <br>
87
​
88
      <div style="text-align:center">
89
        <span class="dot" onclick="currentSlide(0)"></span>
90
        <span class="dot" onclick="currentSlide(1)"></span>
91
        <span class="dot" onclick="currentSlide(2)"></span>
92
      </div>
93
    </body>
94
    <script>
95
      //khai báo biến slideIndex đại diện cho slide hiện tại
96
      var slideIndex;
97
      // KHai bào hàm hiển thị slide
98
      function showSlides() {
99
          var i;
100
          var slides = document.getElementsByClassName("mySlides");
101
          var dots = document.getElementsByClassName("dot");
102
          for (i = 0; i < slides.length; i++) {
103
             slides[i].style.display = "none";
104
          }
105
          for (i = 0; i < dots.length; i++) {
106
              dots[i].className = dots[i].className.replace(" active", "");
107
          }
108
​
109
          slides[slideIndex].style.display = "block";
110
          dots[slideIndex].className += " active";
111
          //chuyển đến slide tiếp theo
112
          slideIndex++;
113
          //nếu đang ở slide cuối cùng thì chuyển về slide đầu
114
          if (slideIndex > slides.length - 1) {
115
            slideIndex = 0
116
          }
117
          //tự động chuyển đổi slide sau 5s
118
          setTimeout(showSlides, 5000);
119
      }
120
      //mặc định hiển thị slide đầu tiên
121
      showSlides(slideIndex = 0);
122
​
123
​
124
      function currentSlide(n) {
125
        showSlides(slideIndex = n);
126
      }
127
    </script>
128
</html>
PHÓNG TO