1. Inserte una capa en DreamWeaver y utilice esta capa como área de desplazamiento. Establezca los parámetros de la capa de la siguiente manera:
Establezca el número de capa en: slayer, que es el atributo de ID de la capa.
Los valores izquierdo y superior son la posición de la capa en la página y se pueden configurar según sea necesario; aquí son 100 y 120 píxeles.
El ancho y el alto son el tamaño de la capa y también se configuran según sea necesario;
Clip se refiere al área de visualización de la capa, y la parte fuera del clip está oculta. Usamos esta área de visualización para ocultar la parte derecha de la capa y luego controlamos el movimiento de la capa mientras controlamos esta área de visualización para completar el desplazamiento. efecto de área que queremos.
Establezca el derecho en el ancho de la pantalla, aquí en 340; la parte inferior es igual a la altura.
El siguiente es el código de la capa:
< div id="slayer" style="posición:absoluta; arriba: 120px; izquierda: 100px; clip: rect(0 340 120 0); altura: 120px; color de fondo: #CCCCCC; color de fondo de capa: # CCCCCC; borde: 1px ninguno #000000 ancho: 670px" >
Podemos colocar algunas imágenes horizontalmente en la capa; aquí usamos una tabla en su lugar. El tamaño de la capa establecida arriba es suficiente para acomodar todas las imágenes.
2. El siguiente código es el código de desplazamiento de capa, que insertamos debajo de la marca de capa <div>:
Al insertar, tenga en cuenta que el valor de LayerW es el valor en el lado derecho del clip, que aquí es 340.
< lenguaje de escritura="javascript" >
< !-- //por tengo
var LayerW=340; //Establece el ancho del área de visualización.
var capaH=parseInt(slayer.style.height);
var capaL=parseInt(slayer.style.left);
var capaT=parseInt(slayer.style.top);
var paso=0; //valor de desplazamiento
función movstar(a,hora){
if (a< 0&&paso >-parseInt(slayer.scrollWidth)+capaW||a >0&&paso< 0)
movimiento(a);
movx=setTimeout("movstar("+a+","+tiempo+")",tiempo);
}
movimiento de función(){
clearTimeout(movx);
}
función mov(a){
slayer.style.left = (paso+=a) + capaL;
clipL=0-paso;
clipR=capaW-paso;
clipB=capaH;
clipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /guión >
3. Inserte otra capa para colocar el "botón de control".
Esta capa está ubicada debajo de la capa anterior y se usa para colocar los "botones de control". La posición se puede ajustar según sea necesario, como se muestra a continuación. Aquí usamos los bloques de colores de la tabla como botones de control. Sería mejor si hiciéramos dos imágenes en forma de flecha.
4. Agregue los siguientes códigos en las etiquetas de "Botones de control".
Esto se agrega en la etiqueta de la tabla <td>. Si usa una imagen como botón, agréguela en la etiqueta <img>.
Botón izquierdo:
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
Botón derecho:
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
El significado del código anterior es que cuando el mouse apunta al botón, la acción comienza, presionar y mantener presionado el botón se acelera, el mouse abandona el botón para detener la acción y el signo - indica movimiento en la dirección opuesta.
5. Completar
Cuando el mouse apunte al "Botón de control", se desplazará hacia la izquierda o hacia la derecha. Al hacer clic y mantener presionado el mouse, se acelerará el desplazamiento.
El código completo es: (se puede copiar y probar en el área CUERPO)
< div id="slayer" style="posición:absoluta; arriba: 120px; izquierda: 100px; clip: rect(0 340 120 0); altura: 120px; color de fondo: #CCCCCC; color de fondo de capa: # CCCCCC; borde: 1px ninguno #000000 ancho: 670px" >
< lenguaje de escritura="javascript" >
< !-- //por tengo
var LayerW=340; //Establece el ancho del área de visualización.
var capaH=parseInt(slayer.style.height);
var capaL=parseInt(slayer.style.left);
var capaT=parseInt(slayer.style.top);
var paso=0; //valor de desplazamiento
función movstar(a,hora){
if (a< 0&&paso >-parseInt(slayer.scrollWidth)+layerW||a >0&&paso< 0)
movimiento(a);
movx=setTimeout("movstar("+a+","+tiempo+")",tiempo);
}
movimiento de función(){
clearTimeout(movx);
}
función mov(a){
slayer.style.left = (paso+=a) + capaL;
clipL=0-paso;
clipR=capaW-paso;
clipB=capaH;
clipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /guión >
< tabla cellspace="10" border="0" cellpadding="0" >
<tr bgcolor="#FFCC99" >
< td altura="100" ancho="100" > </ /td >
< td altura="100" ancho="100" > </ /td >
< td altura="100" ancho="100" > </ /td >
< td altura="100" ancho="100" > </ /td >
< td altura="100" ancho="100" > </ /td >
< td altura="100" ancho="100" > </ /td >
< /tr >
< /tabla >
< /div >
< div id="Capa1" estilo="posición:absoluta; ancho:344px; alto:20px; índice z:1; izquierda: 97px; arriba: 244px" >
< ancho de tabla="100%" alto="100%" >
<tr>
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover() ;movstar(1,20)" ancho="14" >< /td >
< td >< /td >
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover ();movstar(-1,20)" ancho="14" >< /td >
< /tr >
< /tabla >
< /div >