O efeito de rolagem sem costura JS pode ser visto em quase qualquer página da web. Alguns podem ser plug-ins, mas, na verdade, o uso de JavaScript original é relativamente simples.
O principal é usar o conhecimento da localização do JS.
1.innerhtml: defina ou obtenha a tag html do elemento
2.Scrollleft: defina ou obtenha a distância entre o limite esquerdo do objeto e o extremo mais à esquerda do conteúdo atualmente visível na janela
3.OffsetWidth: defina ou obtenha a largura do rótulo especificado
4.setInterval (): Defina o método para iniciar regularmente
5.ClearInterval (); Limpe o cronômetro
Imagem de reprodução:
Sneak: Demo
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<Title> Javascript Scroll Production </ititle>
</head>
<Body>
<estilo>
/*conexão*/
*{
margem: 0;
preenchimento: 0;
}
img {max-width: 100%;}
.recipiente{
MAX-LUDA: 620px;
margem: 0 automático;
Top-top: 50px;
}
.Text-Center {Text-Align: Center;}
.list-inline li {
Exibição: bloco embutido;
}
.Hide {Display: Nenhum;}
HR {
margem: 20px 0;
}
.marcação{
Background-Color: #CCC;
preenchimento: 5px 0;
}
.TAG Li {
preenchimento: 0 10px;
Border-Ift: 1px Solid #FFF;
Cursor: Ponteiro;
}
.Tag Li: Primeiro filho {
Interação da borda: transparente;
}
.TAG Li.Active {
Background-Color: #DDD;
}
.Scroll {
Posição: relativa;
preenchimento: 10px;
Margin-Bottom: 20px;
Background-Color: #DDD;
}
.enrolar{
estouro: oculto;
}
.contente{
Min-largura: 3000px;
Altura: 200px;
}
.Content ul {
flutuar: esquerda;
}
.Content ul li {
Exibição: bloco embutido;
Max-lar: 200px;
}
#prev,#a seguir {
Largura: 50px;
Altura: 50px;
Margin -top: -25px;
Background-Color: #CCC;
altura da linha: 50px;
Alinhamento de texto: centro;
Cursor: Ponteiro;
}
#prev {
Posição: Absoluto;
Esquerda: 0;
TOP: 50%;
Radio de fronteira: 0 25px 25px 0;
}
#próximo{
Posição: Absoluto;
Direita: 0;
TOP: 50%;
Radio de fronteira: 25px 0 0 25px;
}
</style>
<div>
<H1> Produção de rolagem de imagem </h1>
<HR>
<div>
<div id = "Wrap">
<div id = "content">
<ul id = "list1">
<li> <img src = "freelance.gif"> </li>
<li> <img src = "button.gif"> </li>
<li> <img src = "load.gif"> </li>
<li> <img src = "straw.gif"> </li>
</ul>
<ul id = "list2">
</ul>
</div>
</div>
<div id = "prev">
Anterior
</div>
<div id = "Next">
próximo
</div>
</div>
</div>
<Cript>
var wrap = document.getElementById ('wrap');
var list1 = document.getElementById ('list1');
var list2 = document.getElementById ('list2');
var prev = document.getElementById ('prev');
var a próximo = document.getElementById ('Next');
// Crie uma cópia da lista de conteúdo
list2.innerhtml = list1.innerhtml;
// muda para a esquerda
função scroll () {
if (wrap.scrollleft> = list2.offsetWidth) {
wrap.ScrollLeft = 0;
}
outro{
Wrap.ScrollLeft ++;
}
}
Timer = setInterval (rolagem, 1);
// Use ClearInterval () para estadia de mouse
wrap.onMouseOver = function () {
ClearInterval (timer);
}
wrap.onMouseOut = function () {
Timer = setInterval (rolagem, 1);
}
// acelerar para a esquerda
função scroll_l () {
if (wrap.scrollleft> = list2.offsetWidth) {
wrap.ScrollLeft = 0;
}
outro{
Wrap.ScrollLeft ++;
}
}
// role para a direita
função scroll_r () {
if (wrap.scrollleft <= 0) {
wrap.ScrollLeft+= list2.OffSetWidth;
}
outro{
Wrap.Scrollleft--;
}
}
prev.OnClick = function () {
ClearInterval (timer);
mudança (0)
}
next.OnClick = function () {
ClearInterval (timer);
mudança (1)
}
mudança de função (r) {
if (r == 0) {
timer = setInterval (scroll_l, 60);
wrap.onMouseOut = function () {
timer = setInterval (scroll_l, 60);
}
}
if (r == 1) {
timer = setInterval (scroll_r, 60);
wrap.onMouseOut = function () {
timer = setInterval (scroll_r, 60);
}
}
}
</script>
</body>
Código muito conciso e prático, embeleza -o de acordo com as necessidades do seu projeto.