English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este artículo comparte con ustedes html5El código específico de la presentación de diapositivas, a modo de ejemplo, se detalla a continuación
1.diseño de la presentación de diapositivas:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*eliminar estilos por defecto*/ *{ margen: 0; padding: 0; } /*centrar div*/ #outer{ width: 520px; height: 333px; /*centrar*/ margen: 50px auto; /* * Establecer el color de fondo */ background-color: greenyellow; /*Establecer los márgenes superior e inferior internos*/ padding: 10px 0; /*Activar la posición relativa del elemento padre*/ position: relative; /*Ocultar el contenido sobrante*/ overflow: hidden; } /*Establecer ul*/ #imgList{ /*Eliminar los puntos de lista*/ list-style: none; /*Establecer el ancho de ul*/ width: 2600px; /*Activar la posición absoluta*/ position: absolute; /* * A través de la modificación del valor left de ul, se puede cambiar la imagen * 1 0px * 2 -520px * 3 -1040px * 4 -1560px * .... */ left: 0px; } /*Establecer li*/ li{ /*Establecer el flotamiento del elemento*/ float: left; /*Establecer el margen exterior*/ margin: 0 10px; } /*Establecer el botón de navegación*/ #nav{ /*Activar la posición absoluta*/ position: absolute; /*Posicionar*/ bottom: 20px; /* * #outer anchura 520px * * #nav anchura 125px * * 520 - 125 = 395/2 = 197.5 */ left: 197px; } #nav a{ /*Establecer el flotamiento de a*/ float: left; /*Establecer el ancho y la altura*/ width: 15px; height: 15px; /*Establecer el color de fondo*/ background-color: red; /*Establecer el margen exterior*/ margin: 0 5px; /*Establecer la transparencia*/ opacity: 0.5; filter: alpha(opacity=50); } </style> </head> <body> <!-- crear un div como contenedor --> <div id="outer"> <!--crear un ul para guardar las imágenes--> <ul id="imgList"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> </ul> <!--crear un div para colocar los botones de navegación--> <div id="nav"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> </div> </div> </body> </html>
2.lógica de la presentación de diapositivas:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*eliminar estilos por defecto*/ *{ margen: 0; padding: 0; } /*centrar div*/ #outer{ width: 520px; height: 333px; /*centrar*/ margen: 50px auto; /* * Establecer el color de fondo */ background-color: greenyellow; /*Establecer los márgenes superior e inferior internos*/ padding: 10px 0; /*Activar la posición relativa del elemento padre*/ position: relative; /*Ocultar el contenido sobrante*/ overflow: hidden; } /*Establecer ul*/ #imgList{ /*Eliminar los puntos de lista*/ list-style: none; /*Establecer el ancho de ul*/ width: 2600px; /*Activar la posición absoluta*/ position: absolute; /* * A través de la modificación del valor left de ul, se puede cambiar la imagen * 1 0px * 2 -520px * 3 -1040px * 4 -1560px * .... */ left: 0px; } /*Establecer li*/ li{ /*Establecer el flotamiento del elemento*/ float: left; /*Establecer el margen exterior*/ margin: 0 10px; } /*Establecer el botón de navegación*/ #nav{ /*Activar la posición absoluta*/ position: absolute; /*Posicionar*/ bottom: 20px; /* * #outer anchura 520px * * #nav anchura 125px * * 520 - 125 = 395/2 = 197.5 */ left: 197px; } #nav a{ /*Establecer el flotamiento de a*/ float: left; /*Establecer el ancho y la altura*/ width: 15px; height: 15px; /*Establecer el color de fondo*/ background-color: red; /*Establecer el margen exterior*/ margin: 0 5px; /*Establecer la transparencia*/ opacity: 0.5; filter: alpha(opacity=50); } #nav a:hover{ background-color: black; } </style> <script type="text/javascript" src="js/tools.js"></script> <script type="text/javascript"> window.onload = function(){ //Obtener el ul con id 'imgList' var imgList = document.getElementById("imgList"); //Obtener todas las etiquetas de imágenes var imgs = document.getElementsByTagName("img"); //Establecer el ancho de ul imgList.style.width = 520 * imgs.length + "px"; //Centrar el botón de navegación //Obtener el div con id 'outer' var outer = document.getElementById("outer"); //Obtener el div con id 'nav' var nav = document.getElementById("nav"); nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px"; //Crear una variable para guardar el índice de la imagen actual mostrada var index = 0; //Obtener todos los enlaces de hipertexto var links = document.getElementsByTagName("a"); //Establecer el enlace correspondiente para que esté en estado seleccionado links[index].style.backgroundColor = "black"; //Activar el cambio automático de imágenes autoChange(); /* * Al hacer clic en el enlace de hipertexto, cambia a la imagen correspondiente * Al hacer clic en el primer enlace, cambia a la primera imagen * Al hacer clic en el segundo enlace, cambia a la segunda imagen */ //Enlazar todas las funciones de respuesta al clic de los enlaces for(var i=0 ; i<links.length ; i++{ //Agregar un atributo en los enlaces links[i].num = i; links[i].onclick = function(){ //Al cambiar la imagen, para no ser afectado por el cambio automático, se debe cerrar clearInterval(autoTimer); //Obtener el índice del enlace de hipertexto clickeado actual //Actualizar el índice de la imagen actual index = this.num; //Cambiar a la imagen correspondiente /* * Cambiar la imagen es modificar el valor de la propiedad left de imgList * 0 0*-520 * 1 1*-520 * 4 4*-520 */ //imgList.style.left = -520*index + "px"; //Establecer el efecto de transición mover(imgList , "left" , -520*index , 20 , function(){ //Después de cambiar la imagen, abre el cambio automático autoChange(); }); setA(); }; } //Definir una variable para guardar el temporizador de cambio automático de imágenes var autoTimer; /* * Definir una función específica para cambiar automáticamente las imágenes */ function autoChange(){ //Abre un temporizador para manejar el cambio de imágenes autoTimer = setInterval(function(){ //Incremento del índice index++; //Determinar si el valor de index es válido index = index % imgs.length; //Cambiar la imagen mover(imgList , "left" , -520*index , 20 , function(){ //Terminó la animación, cambié los puntos de navegación setA(); }); ,3000); } /* * La función se utiliza específicamente para establecer el estado seleccionado de los enlaces de hipertexto */ function setA(){ /* * Dado que la última imagen y la primera son iguales, cuando se muestra la última imagen, debería cambiar el color del primer enlace */ if(index >= imgs.length - 1{ index = 0; //Se ha cambiado a la última imagen, cambié instantáneamente a la primera imgList.style.left = 0; } /*Recorrer los enlaces de hipertexto*/ for(var i=0 ; i<links.length ; i++{ //Establece el color de fondo de todos los enlaces de hipertexto en rojo links[i].style.backgroundColor = ""; } //establecer el enlace seleccionado actual como negro links[index].style.backgroundColor = "black"; } }; </script> </head> <body> <!-- crear un div como contenedor --> <div id="outer"> <!--crear un ul para guardar las imágenes--> <ul id="imgList"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> <li><img src="img/1.jpg" /></li> </ul> <!--crear un div para colocar los botones de navegación--> <div id="nav"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> </div> </div> </body> </html>
código js externo:
/* * definir una función move() para ejecutar algunos efectos de animación simples * Parámetros: * obj, objeto que se ejecutará la animación * attr, atributo que se modificará durante la animación * target, posición de destino de la animación * speed, velocidad de ejecución de la animación * callback, función de retroalimentación, se ejecutará después de que la animación se complete */ function move(obj, attr, target, speed, callback) { //cerrar el temporizador anterior /* * generalmente se guardará el identificador del temporizador como una propiedad del objeto ejecutando la animación, de esta manera se asegura de que solo el objeto actual pueda acceder al temporizador */ clearInterval(obj.timer); //juzgar si se mueve a la izquierda o a la derecha //0 --> 800, mueve a la derecha //si la posición inicial < la posición de destino, mueve a la derecha, velocidad positiva //800 --> 0, mueve a la izquierda //si la posición inicial > la posición de destino, mueve a la izquierda, velocidad negativa //obtener la posición inicial del elemento var current = parseInt(getStyle(obj, attr)); if(current > target) { //si la posición inicial > la posición de destino, mueve a la izquierda, velocidad negativa speed = -speed; } //activar un temporizador para controlar box1mover obj.timer = setInterval(function() { //Obtener box1el valor de left actual var oldValue = parseInt(getStyle(obj, attr)); //Calcular el nuevo valor a través del valor antiguo var newValue = oldValue + speed; //Determinar si newValue es mayor que800 /* * Si desde 0 hacia 800, realizar la animación, el valor se hace cada vez más grande * Si desde800 a 0 realizar la animación, el valor se hace cada vez más pequeño */ if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) { newValue = target; } //Cambiar el box1el valor de left se cambia al nuevo valor obj.style[attr] = newValue + "px"; //cuando box1Moverse a800px de posición, detener el movimiento if(newValue == target) { clearInterval(obj.timer); //Llamar a la función de devolución de llamada callback && callback(); } , 30); } /* * Usado para obtener los estilos actuales de cualquier elemento * Parámetros: * obj Elemento del que se obtendrá el estilo * name Nombre del estilo a obtener * * Al leer los estilos de un elemento, si el elemento no ha configurado estilos, * mientras que Firefox, Chrome y otros navegadores calcularán automáticamente los valores de estilo de los elementos * Mientras que en el navegador IE, a veces no se calcula automáticamente, sino que se devuelve el valor predeterminado, por ejemplo, el ancho se devuelve como auto * */ function getStyle(obj, name) { //Determinar si el navegador contiene el método getComputedStyle if(window.getComputedStyle) { //Admite navegadores normales return getComputedStyle(obj, null)[name]; } else { //Sólo se admite en IE return obj.currentStyle[name]; } } /* * Definir una función específica para agregar clases a los elementos * Parámetros: * obj Objeto al que se agregará la clase * cn Valor de la propiedad de la clase a agregar */ function addClass(obj, cn) { //Si el elemento tiene esa clase, no se agrega, sino que se agrega si no la tiene if(!hasClass(obj, cn)) { obj.className += " " + cn; } } /* * Crear una función para verificar si un elemento contiene la clase especificada * Si existe, devuelve true. De lo contrario, devuelve false */ function hasClass(obj, cn) {}} //Crear expresión regular var reg = new RegExp("\\b" + cn + "\\b"}); //return reg.test(obj.className); retornar el resultado de la verificación } /* * Método para eliminar el valor de clase de un elemento especifico */ function removeClass(obj, cn) { //Para eliminar una clase, reemplazar esta clase con una cadena vacía //Crear expresión regular var reg = new RegExp("\\b" + cn + "\\b", "g"); //Juzgar si obj contiene esta clase if(reg.test(obj.className)) { //Reemplazar el contenido con una cadena vacía obj.className = obj.className.replace(reg, ""); } } /* * Método para cambiar la clase del elemento * Si el elemento tiene esa clase, eliminar * Si el elemento no tiene esa clase, agregar * */ function toggleClass(obj, cn) { //Revisar si obj contiene cn if(hasClass(obj, cn)) { //Si hay esa clase, eliminar removeClass(obj, cn); } else { //Si no hay esa clase, agregar addClass(obj, cn); } }
Nota:Encontrar imágenes por su cuenta
Esto es todo el contenido del artículo, espero que ayude a su aprendizaje y que todos los amigos apoyen a la tutorial de grito.
Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado una edición humana y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Si se verifica, este sitio eliminará inmediatamente el contenido sospechoso de infracción.