Histórico da Página
...
HTML |
---|
<script> TOTVS_Carousel = { Id: "Carousel1", Container: "divContainer", Time: 0, SlideIndex: 0, Thumbs: false, Images: [], Init: function(id, nameOfContainer, time, images){ this.Id = id; this.Time = time; this.Container = (typeof nameOfContainer === "string") ? document.getElementById(nameOfContainer) : nameOfContainer; this.Images = images; this.Build(); }, Build: function(){ if(this.Container){ 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'; _divWrapperImages.innerHTML = (i+1) + "/" + this.Images.length; var _divWrapperImagesUpperText = document.createElement('div'); _divWrapperImagesUpperText.id = this.Id + "_WrapperImage_" + (i+1) + "_UpperText"; _divWrapperImagesUpperText.className = 'numbertext'; _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.Thumbs){ var _divWrapperDots = document.createElement('div'); _divWrapperDots.id = this.Id + "_WrapperWrapperDotsWrapper"; _divWrapperDots.style.textAlign = 'center'; for(var i = 0; i < this.Images.length; i++){ var _divWrapperDotsSpans = document.createElement('span'); _divWrapperDotsSpans.id = this.Id + "_WrapperDotsWrapperDotsWrapper_" + (i+1) + "_Span"; _divWrapperDotsSpans.name = _divWrapperDotsSpans.id; _divWrapperDotsSpans.className = 'dot'; _divWrapperDots.appendChild(_divWrapperDotsSpans); } _divWrapperDots.style.marginTop = '10px'; _divWrapper.appendChild(_divWrapperDots); } } this.Container.appendChild(_divWrapper); } }, ShowSlides: function(){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); 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 } } 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); TOTVS_Carousel.ShowSlides(); </script> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas