Histórico da Página
...
HTML |
---|
<script> TOTVS_Carousel = { Id: "Carousel1", Container: "divContainer", Time: 0, SlideIndex: 0, Thumbs: false, Images: [], Auto: 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){ 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.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(i) { thisTOTVS_Carousel.CurrentSlide(i) }; } _divWrapperDots.appendChild(_divWrapperDotsSpans); } _divWrapperDots.style.marginTop = '15px'; _divWrapper.appendChild(_divWrapperDots); } if(!this.Auto){ } } 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