O JS substitui a marquise para obter rolagem perfeita de fotos
Talvez todo mundo tenha encontrado isso. Quando a imagem está rolando em marquise, quando é rolada até o final, ele salta de volta para o ponto de partida, em vez de rolar perfeitamente como o texto. O seguinte é realizar a rolagem perfeita de fotos através de JS.
Vamos primeiro entender os seguintes atributos:
INNERHTML: defina ou obtenha html localizado nas tags de partida e final do objeto
ScrolHeight: obtém a altura de rolagem do objeto.
Rollleft: defina ou obtenha a distância entre o limite esquerdo do objeto e a extremidade mais à esquerda do conteúdo atualmente visível na janela
ScrollTop: define ou fica a distância entre a parte superior do objeto e a parte superior do conteúdo visível na janela
Scrollwidth: obtenha a largura de rolagem do objeto
Offsetheight: obtém a altura do objeto em relação ao layout ou à coordenada pai especificada pela propriedade de coordenadas dos pais OffsetParent
OffsetLeft: obtém a posição esquerda calculada do objeto em relação ao layout ou coordenadas dos pais especificados pela propriedade OffsetParent
OffsetTop: obtém a posição superior calculada do objeto em relação ao layout ou coordenadas dos pais especificados pela propriedade OffsetTop
Lwidth Offset: recebe a largura do objeto em relação ao layout ou à coordenada pai especificada pela propriedade de coordenadas dos pais.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Fotos role para cima sem problemas
<style type = "text/css"> <!- #Demo {Background: #FFF; Overflow: Hidden; borda: 1px tracejada #ccc; altura: 100px; text-align: Center; float: esquerd;} #Demo IMG {borda: 3px Solid #f2f2; Display: Block;}-> id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id id = "Demo2"> </div> </div> <cript> <!-var speed = 10; // Quanto maior o número, mais lentamente a velocidade var tab = document.getElementByidx_x ("Demo"); var tab1 = document.getElementByidx_x ("Demo1"); var tab2 = document.getElementByidx_x ("Demo2"); Tab2.innerHtml = tab1.innerhtml; // clone Demo1 como Demo2Function marquee () {if (tab2.offsettop-tab.scrolltop <= 0) // Ao rolar para a junção de Demo1 e Demo2 Tab.Scrolltop- = tab1.offsetheight // Demo Salts para o topo {tab.scrolltop+ MyMar = setInterval (marquise, velocidade); tab.onMouseOver = function () {ClearInterval (myMar)}; // Quando o mouse é movido, o timer é limpo para alcançar o objetivo de rolagem de parada.Fotos rolam perfeitamente para baixo
<style type = "text/css"> <!- #Demo {Background: #FFF; Overflow: Hidden; borda: 1px tracejada #ccc; altura: 100px; text-align: Center; float: esquerda;} #Demo img {borda: 3px Solid #f2f2; Display: Block;}-> id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id id = "Demo2"> </div> </div> <cript> <!-var speed = 10; // Quanto maior o número, mais lentamente a velocidade var tab = document.getElementByidx_x ("Demo"); var tab1 = document.getElementByidx_x ("Demo1"); var tab2 = document.getElementByidx_x ("Demo2"); Tab2.innerHtml = tab1.innerhtml; // clone Demo1 é Demo2tab.scrolltop = tab.scrolHeightFunction marquee () {if (tab1.offsettop-tab.scrolltop> = 0) // ao rolagem até a junção de Demo1 e Demo2 Tab.ScrOTOP+= TAB2.OffSTETHEFEST // Demo de Demo1 e Demo2 Tab.ScrOTOP+= Tab2. MyMar = setInterval (marquise, velocidade); tab.onMouseOver = function () {ClearInterval (myMar)}; // Quando o mouse é movido para cima, limpe o cronômetro para obter o objetivo de rolagem de stop stop.onmouseout = function () {myMar = setInterval (marquee, velocidade)}; //As fotos rolam perfeitamente para a esquerda
<style type = "text/css"> <!-#Demo {Background: #FFF; Overflow: Hidden; borda: 1px #ccc; largura: 500px;}#Demo IMG {Border: 3px Solid#F2f2; {float: esquerda;}-> </style> role à esquerda <div id = "Demo"> <div id = "Indemo"> <div id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clike_logo.gif" //2070 </link) src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a) <a href src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a) <a href src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a) <a href src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id id = "Demo2"> </div> </div> <cript> <!-var speed = 10; // Quanto maior o número, mais lento a velocidade var tab = document.getElementByidx_x ("Demo"); var tab1 = document.getElementByidx_x ("Demo1"); var tab1 = documentElementElementByIdx_x ("Demo1"); var Tab2 = Document.MementEnByIdL_X ("Demo2"); Marquee () {if (tab2.offsetWidth-tab.ScrollLeft <= 0) tab.scrollleft- = tab1.offsetWidthelse {tab.scrollLeft ++;}} var myMar = setInterval (marquee, speed); {MyMar = setInterval (marquise, velocidade)};-> </sCript>As fotos rolam perfeitamente para a direita
<style type = "text/css"> <!-#Demo {Background: #FFF; Overflow: Hidden; borda: 1px #ccc; largura: 500px;}#Demo IMG {Border: 3px Solid#F2f2; {float: esquerda;}-> </style> role à direita <div id = "Demo"> <div id = "Indemo"> <div id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clin #Logo.GIF" //ww.vevb.com/other/link/clike_logo.gif "/> </lai> <vervb.com/other/link/clink/" re) src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a) <a href src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a) <a href src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a) <a href src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id id = "Demo2"> </div> </div> <cript> <!-var speed = 10; // Quanto maior o número, mais lento a velocidade var tab = document.getElementByidx_x ("Demo"); var tab1 = document.getElementByidx_x ("Demo1"); var tab1 = documentElementElementByIdx_x ("Demo1"); var Tab2 = Document.MementEnByIdL_X ("Demo2"); Marquee () {if (tab.scrollleft <= 0) tab.scrollLeft+= tab2.offsetWidthelse {tab.scrollLeft-;}} var myMar = setInterval (marquise, speed); tab.onMouseOver = function) {ClearInterval (mymar); {MyMar = setInterval (marquise, velocidade)};-> </sCript>Por fim, se alguém quiser ter dois conjuntos de imagens de rolagem em uma página, um à esquerda e o outro à direita, o abaixo pode ser usado. Eu adicionei todos os js a i e css
Role para a direita
<div id = "Demoi"> <div id = "Indemoi"> <div id = "Demoi1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "" " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a) <a href src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a) <a href src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> speedi = 10; // quanto maior o número, mais lentamente a velocidade var tabi = document.getElementByidx_x ("Demoi"); var tabi1 = document.getElementByidx_x ("Demoi1"); var tabi2 = document.getElementByByIdx_x ("Demoi2"); Tabi2.innerHTMl = Tabi1.inner (Demoi2 "); Marqueei () {if (tabi.ScrollLeft <= 0) tabi.ScrollLeft+= tabi2.offsetWidthelse {tabi.scrollleft-;}} var myMari = setInterval (marqueei, speedi); {Mymari = setInterval (marqueei, speedi)};-> </sCript>O exemplo simples acima de JS que realizará a rolagem contínua ininterrupta de imagens é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.