Histórico da Página
...
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<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, 2000); // Change image every 2 seconds } </script> |
HTML |
---|
<style> @import url('https://fonts.googleapis.com/css?family=Lato'); * {box-sizing: border-box;} body {font-family: Verdana'Lato', sans-serif !important;} .mySlides {display: none;} img {vertical-align: middle;} /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -42px; color: white !important; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; text-decoration: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; text-decoration: none; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); text-decoration: 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: 35px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } </style> |
...
HTML |
---|
<script> TOTVS_Carousel = { Id: "Carousel1", Container: "divContainer", Time: 0, SlideIndex: 0, Thumbs: false, Images: [], Auto: false, UseTotvsSkin: false, Init: function(id, nameOfContainer, time, images, auto, thumbs){ this.Id = id; this.Time = time; this.Container = (typeof nameOfContainer === "string") ? document.getElementById(nameOfContainer) : nameOfContainer; this.Images = images; this.Auto = auto; this.Thumbs = thumbs; this.Build(); }, Build: function(){ if(this.Container){ if(this.UseTotvsSkin){ var _divWrapperTotvsSkin = document.createElement('div'); _divWrapperTotvsSkin.id = this.Id + "_Wrapper"; _divWrapperTotvsSkin.className = 'totvs-skin-wrapper'; } var _divWrapper = document.createElement('div'); _divWrapper.id = this.Id + "_Wrapper"; _divWrapper.className = 'slideshow-container'; if(this.Images != null && this.Images != undefined && this.Images.length > 0){ for(var i = 0; i < this.Images.length; i++){ var _divWrapperImages = document.createElement('div'); _divWrapperImages.id = this.Id + "_WrapperImage_" + (i+1); _divWrapperImages.className = 'mySlides fade'; var _divWrapperImagesUpperText = document.createElement('div'); _divWrapperImagesUpperText.id = this.Id + "_WrapperImage_" + (i+1) + "_UpperText"; _divWrapperImagesUpperText.className = 'numbertext'; _divWrapperImagesUpperText.innerHTML = (i+1) + " / " + this.Images.length; _divWrapperImages.appendChild(_divWrapperImagesUpperText); var _divWrapperImagesImg = document.createElement('img'); _divWrapperImagesImg.id = this.Id + "_WrapperImage_" + (i+1) + "_Img"; _divWrapperImagesImg.name = _divWrapperImagesImg.id; _divWrapperImagesImg.style.width = '100%'; _divWrapperImagesImg.src = this.Images[i].Url; _divWrapperImages.appendChild(_divWrapperImagesImg); var _divWrapperImagesCaptionText = document.createElement('div'); _divWrapperImagesCaptionText.id = this.Id + "_WrapperImage_" + (i+1) + "_CaptionText"; _divWrapperImagesCaptionText.className = 'text'; _divWrapperImagesCaptionText.innerHTML = this.Images[i].Caption; _divWrapperImages.appendChild(_divWrapperImagesCaptionText); _divWrapper.appendChild(_divWrapperImages); } if(!this.Auto){ var _divWrapperNext = document.createElement('a'); _divWrapperNext.id = this.Id + "_WrapperNext"; _divWrapperNext.className = 'next'; _divWrapperNext.innerHTML = '❯' _divWrapperNext.onclick = function() { TOTVS_Carousel.PlusSlides(1); } _divWrapper.appendChild(_divWrapperNext); var _divWrapperPrev = document.createElement('a'); _divWrapperPrev.id = this.Id + "_WrapperPrev"; _divWrapperPrev.className = 'prev'; _divWrapperPrev.innerHTML = '❮' _divWrapperPrev.onclick = function() { TOTVS_Carousel.PlusSlides(-1); } _divWrapper.appendChild(_divWrapperPrev); } if(!this.Thumbs){ var _divWrapperDots = document.createElement('div'); _divWrapperDots.id = this.Id + "_WrapperDotsWrapper"; _divWrapperDots.style.textAlign = 'center'; for(var i = 0; i < this.Images.length; i++){ var _divWrapperDotsSpans = document.createElement('span'); _divWrapperDotsSpans.id = this.Id + "_WrapperDotsWrapper_" + (i+1) + "_Span"; _divWrapperDotsSpans.name = _divWrapperDotsSpans.id; _divWrapperDotsSpans.className = 'dot'; if(!this.Auto){ _divWrapperDotsSpans.onclick = function() { var _index = 0; var _left = this.id.substring(this.id.indexOf('_WrapperDotsWrapper_') + '_WrapperDotsWrapper_'.length); if(_left.length > 0) _left = _left.replace('_Span', ''); TOTVS_Carousel.CurrentSlide(_left); }; } _divWrapperDots.appendChild(_divWrapperDotsSpans); } _divWrapperDots.style.marginTop = '15px'; _divWrapper.appendChild(_divWrapperDots); } } if(this.UseTotvsSkin){ _divWrapperTotvsSkin.appendChild(_divWrapper); this.Container.appendChild(_divWrapperTotvsSkin); } else this.Container.appendChild(_divWrapper); } }, PlusSlides(n) { this.ShowSlides(this.SlideIndex += n); }, CurrentSlide(n) { this.ShowSlides(this.SlideIndex = n); }, ShowSlides: function(n){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if(this.Auto){ for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } this.SlideIndex++; if (this.SlideIndex > slides.length) {this.SlideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[this.SlideIndex-1].style.display = "block"; dots[this.SlideIndex-1].className += " active"; setTimeout('TOTVS_Carousel.ShowSlides()', this.Time); // Change image every 2 seconds } else{ if (n == undefined || n == null) {n = 1; this.SlideIndex = 1; } if (n > slides.length) {this.SlideIndex = 1} if (n < 1) {this.SlideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[this.SlideIndex-1].style.display = "block"; dots[this.SlideIndex-1].className += " active"; } } } var _images = []; var _imagesSettings1 = { Url: '/download/attachments/330843097/background_1.jpg?version=1&modificationDate=1521661840591&api=v2', Caption: 'Imagem1' } var _imagesSettings2 = { Url: '/download/attachments/330843097/background-2.jpg?version=1&modificationDate=1521661841465&api=v2', Caption: 'Imagem2' } var _imagesSettings3 = { Url: '/download/attachments/330843097/background-3.jpg?version=1&modificationDate=1521661935617&api=v2', Caption: 'Imagem3' } _images.push(_imagesSettings1); _images.push(_imagesSettings2); _images.push(_imagesSettings3); TOTVS_Carousel.Init('Carousel1', 'divContainer', 3000, _images, false, false); TOTVS_Carousel.ShowSlides(); </script> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas