English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Conocimientos básicos de JavaScript sobre html5Explicación de ejemplo de carrusel (44)

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.

Te gustará