El efecto de desplazamiento sin costuras se puede ver en casi cualquier página web. Algunos pueden ser complementos, pero de hecho, usar JavaScript original es relativamente simple.
Lo principal es usar el conocimiento de la ubicación JS.
1.innerhtml: establecer o obtener la etiqueta HTML del elemento
2.scrollleft: establezca o obtenga la distancia entre el límite izquierdo del objeto y el extremo más a la izquierda del contenido actualmente visible en la ventana
3.OffSetWidth: Establezca o obtenga el ancho de la etiqueta especificada
4.SetInterval (): configure el método para comenzar regularmente
5.ClearInterval (); Borrar el temporizador
Imagen de reproducción:
Desneo: demostración
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> JavaScript Production Production </title>
</ablo>
<Body>
<estilo>
/*Conmentación*/
*{
margen: 0;
relleno: 0;
}
img {width máximo: 100%;}
.recipiente{
Max-Width: 620px;
margen: 0 auto;
Top-top: 50px;
}
.Text-Center {Text-Align: Center;}
.lista en línea li {
Pantalla: bloque en línea;
}
.Hide {Display: Ninguno;}
hora{
margen: 20px 0;
}
.etiqueta{
Color de fondo: #CCC;
relleno: 5px 0;
}
.tag li {
relleno: 0 10px;
Border-izquierda: 1px sólido #fff;
cursor: puntero;
}
.tag li: primer hijo {
Border-izquierda: transparente;
}
.tag li.active {
Color de fondo: #DDD;
}
.voluta{
Posición: relativo;
relleno: 10px;
margen-fondo: 20px;
Color de fondo: #DDD;
}
.envoltura{
desbordamiento: oculto;
}
.contenido{
Min-Width: 3000px;
Altura: 200px;
}
.Content Ul {
flotante: izquierda;
}
.Content Ul Li {
Pantalla: bloque en línea;
Max-Width: 200px;
}
#anterior,#Next {
Ancho: 50px;
Altura: 50px;
margen -top: -25px;
Color de fondo: #CCC;
Línea de altura: 50px;
Text-Align: Center;
cursor: puntero;
}
#prev {
Posición: Absoluto;
Izquierda: 0;
arriba: 50%;
Border-Radius: 0 25px 25px 0;
}
#próximo{
Posición: Absoluto;
Derecha: 0;
arriba: 50%;
Border-Radius: 25px 0 0 25px;
}
</style>
<div>
<h1> Producción de desplazamiento de la imagen </h1>
<hr>
<div>
<div id = "envoltura">
<div id = "contenido">
<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 = "anterior">
previsamente
</div>
<div id = "siguiente">
próximo
</div>
</div>
</div>
<script>
var wrap = document.getElementById ('wrap');
var list1 = document.getElementById ('list1');
var list2 = document.getElementById ('list2');
var prev = document.getElementById ('previo');
var next = document.getElementById ('next');
// crear una copia de la lista de contenido
list2.innerhtml = list1.innerhtml;
// Cambiar a la izquierda
función scroll () {
if (wrap.scrollleft> = list2.offsetWidth) {
wrap.scrollleft = 0;
}
demás{
wrap.scrollleft ++;
}
}
temporizador = setInterval (scroll, 1);
// Usar ClearInterval () para la estancia del mouse
wrap.onmouseover = function () {
ClearInterval (temporizador);
}
wrap.onmouseOut = function () {
temporizador = setInterval (scroll, 1);
}
// acelerar a la izquierda
función scroll_l () {
if (wrap.scrollleft> = list2.offsetWidth) {
wrap.scrollleft = 0;
}
demás{
wrap.scrollleft ++;
}
}
// desplazarse hacia la derecha
función scroll_r () {
if (wrap.scrollleft <= 0) {
wrap.scrollleft+= list2.offsetWidth;
}
demás{
wrap.scrollleft--;
}
}
prevur.OnClick = function () {
ClearInterval (temporizador);
cambio (0)
}
next.OnClick = function () {
ClearInterval (temporizador);
cambio (1)
}
cambio de función (r) {
if (r == 0) {
temporizador = setInterval (scroll_l, 60);
wrap.onmouseOut = function () {
temporizador = setInterval (scroll_l, 60);
}
}
if (r == 1) {
temporizador = setInterval (scroll_r, 60);
wrap.onmouseOut = function () {
temporizador = setInterval (scroll_r, 60);
}
}
}
</script>
</body>
Código muy conciso y práctico, por favor, embílelo de acuerdo con las necesidades de su proyecto.