1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Banner Rotativo</ title >
7+ < link rel ="stylesheet " href ="style.css ">
8+ < style >
9+ body {
10+ display : flex;
11+ flex-direction : center;
12+ justify-content : center;
13+ align-items : center;
14+ }
15+ 16+ # slider {
17+ width : 80% ;
18+ max-width : 500px ;
19+ height : 25vw ;
20+ max-height : 150px ;
21+ 22+ position : relative;
23+ }
24+ 25+ # slider img {
26+ opacity : 0 ;
27+ 28+ position : absolute;
29+ 30+ width : 100% ;
31+ height : 100% ;
32+ 33+ object-fit : cover;
34+ 35+ transition : opacity 800ms ;
36+ }
37+ 38+ # slider img .selected {
39+ opacity : 1 ;
40+ }
41+ </ style >
42+ </ head >
43+ < body >
44+ < div id ="slider ">
45+ < img class ="selected " src ="https://images.unsplash.com/photo-1530432999454-016a47c78af3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60 " alt ="Image1 ">
46+ < img src ="https://images.unsplash.com/photo-1562514947-bf9cf8e45d4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt ="Image2 ">
47+ < img src ="https://images.unsplash.com/photo-1562526109-878e3d276ceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt ="Image3 ">
48+ < img src ="https://images.unsplash.com/photo-1504870444519-3c678061c754?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt ="Image4 ">
49+ </ div >
50+ 51+ 52+ < script >
53+ let time = 1000 ,
54+ currentImageIndex = 0 ,
55+ images = document
56+ . querySelectorAll ( "#slider img" )
57+ max = images . length ;
58+ 59+ function nextImage ( ) {
60+ 61+ images [ currentImageIndex ]
62+ . classList . remove ( "selected" )
63+ 64+ currentImageIndex ++
65+ 66+ if ( currentImageIndex >= max )
67+ currentImageIndex = 0
68+ 69+ images [ currentImageIndex ]
70+ . classList . add ( "selected" )
71+ }
72+ 73+ function start ( ) {
74+ setInterval ( ( ) => {
75+ // troca de image
76+ nextImage ( )
77+ } , time )
78+ }
79+ 80+ window . addEventListener ( "load" , start )
81+ </ script >
82+ 83+ 84+ </ body >
85+ </ html >
0 commit comments