├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── script.js ├── style.css └── index.html /1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/youtube_slide_v2/HEAD/1.jpg -------------------------------------------------------------------------------- /2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/youtube_slide_v2/HEAD/2.jpg -------------------------------------------------------------------------------- /3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/youtube_slide_v2/HEAD/3.jpg -------------------------------------------------------------------------------- /4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/youtube_slide_v2/HEAD/4.jpg -------------------------------------------------------------------------------- /5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/youtube_slide_v2/HEAD/5.jpg -------------------------------------------------------------------------------- /6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/youtube_slide_v2/HEAD/6.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | document.getElementById('next').onclick = function(){ 3 | let lists = document.querySelectorAll('.item'); 4 | document.getElementById('slide').appendChild(lists[0]); 5 | } 6 | document.getElementById('prev').onclick = function(){ 7 | let lists = document.querySelectorAll('.item'); 8 | document.getElementById('slide').prepend(lists[lists.length - 1]); 9 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #eaeaea; 3 | overflow: hidden; 4 | } 5 | .container{ 6 | position: absolute; 7 | left:50%; 8 | top:50%; 9 | transform: translate(-50%,-50%); 10 | width:1000px; 11 | height:600px; 12 | padding:50px; 13 | background-color: #f5f5f5; 14 | box-shadow: 0 30px 50px #dbdbdb; 15 | } 16 | #slide{ 17 | width:max-content; 18 | margin-top:50px; 19 | } 20 | .item{ 21 | width:200px; 22 | height:300px; 23 | background-position: 50% 50%; 24 | display: inline-block; 25 | transition: 0.5s; 26 | background-size: cover; 27 | position: absolute; 28 | z-index: 1; 29 | top:50%; 30 | transform: translate(0,-50%); 31 | border-radius: 20px; 32 | box-shadow: 0 30px 50px #505050; 33 | } 34 | .item:nth-child(1), 35 | .item:nth-child(2){ 36 | left:0; 37 | top:0; 38 | transform: translate(0,0); 39 | border-radius: 0; 40 | width:100%; 41 | height:100%; 42 | box-shadow: none; 43 | } 44 | .item:nth-child(3){ 45 | left:50%; 46 | } 47 | .item:nth-child(4){ 48 | left:calc(50% + 220px); 49 | } 50 | .item:nth-child(5){ 51 | left:calc(50% + 440px); 52 | } 53 | .item:nth-child(n+6){ 54 | left:calc(50% + 660px); 55 | opacity: 0; 56 | } 57 | .item .content{ 58 | position: absolute; 59 | top:50%; 60 | left:100px; 61 | width:300px; 62 | text-align: left; 63 | padding:0; 64 | color:#eee; 65 | transform: translate(0,-50%); 66 | display: none; 67 | font-family: system-ui; 68 | } 69 | .item:nth-child(2) .content{ 70 | display: block; 71 | z-index: 11111; 72 | } 73 | .item .name{ 74 | font-size: 40px; 75 | font-weight: bold; 76 | opacity: 0; 77 | animation:showcontent 1s ease-in-out 1 forwards 78 | } 79 | .item .des{ 80 | margin:20px 0; 81 | opacity: 0; 82 | animation:showcontent 1s ease-in-out 0.3s 1 forwards 83 | } 84 | .item button{ 85 | padding:10px 20px; 86 | border:none; 87 | opacity: 0; 88 | animation:showcontent 1s ease-in-out 0.6s 1 forwards 89 | } 90 | @keyframes showcontent{ 91 | from{ 92 | opacity: 0; 93 | transform: translate(0,100px); 94 | filter:blur(33px); 95 | }to{ 96 | opacity: 1; 97 | transform: translate(0,0); 98 | filter:blur(0); 99 | } 100 | } 101 | .buttons{ 102 | position: absolute; 103 | bottom:30px; 104 | z-index: 222222; 105 | text-align: center; 106 | width:100%; 107 | } 108 | .buttons button{ 109 | width:50px; 110 | height:50px; 111 | border-radius: 50%; 112 | border:1px solid #555; 113 | transition: 0.5s; 114 | }.buttons button:hover{ 115 | background-color: #bac383; 116 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
LUNDEV
17 |
Tinh ru anh di chay pho, chua kip chay pho thi anhchay mat tieu
18 | 19 |
20 |
21 |
22 |
23 |
LUNDEV
24 |
Tinh ru anh di chay pho, chua kip chay pho thi anhchay mat tieu
25 | 26 |
27 |
28 |
29 |
30 |
LUNDEV
31 |
Tinh ru anh di chay pho, chua kip chay pho thi anhchay mat tieu
32 | 33 |
34 |
35 |
36 |
37 |
LUNDEV
38 |
Tinh ru anh di chay pho, chua kip chay pho thi anhchay mat tieu
39 | 40 |
41 |
42 |
43 |
44 |
LUNDEV
45 |
Tinh ru anh di chay pho, chua kip chay pho thi anhchay mat tieu
46 | 47 |
48 |
49 |
50 |
51 |
LUNDEV
52 |
Tinh ru anh di chay pho, chua kip chay pho thi anhchay mat tieu
53 | 54 |
55 |
56 |
57 |
58 | 59 | 60 |
61 |
62 | 63 | 64 | 65 | --------------------------------------------------------------------------------