con múltiples imágenes y utilizando el método " setInterval " JavaScript para girar el
en un horario programado para que sólo una imagen se visualiza a la vez. La rotación JavaScript suele ir acompañada de efectos de animación que se desvanecen o se deslizan imágenes o texto dentro y fuera de la
. La biblioteca jQuery proporciona una forma sencilla de seleccionar las imágenes y aplicar una rotación animada . Instrucciones
1
< p>
Gire Div < /title> <br> 2 <p> Crear un estilo CSS para la <div> a pueden girar. Ajuste la posición , anchura, altura y color de fondo del <div> . Desactivar la visualización de las imágenes en el <div> y permitir la visualización de la imagen con el nombre de la clase "activa ": <br> <p> <style> <br> <p> # rote { <br> < p > position: relative ; <br> <p> ancho : 979 ; <br> altura <p> : 349 ; <br> <p> background-color : # 999999 ; } <br> <p> <br> < p > # girar img { <br> <p> display : none ; <br> posición <p> : absolute; <br> <p> top: 0 ; <br> <p> izquierda : 0 ; <br> < p >} <br> <p> # girar img.active { <br> <p> display : block; <br> <p> <br> <p> } < /style> <br> <br> 3 <p> Inserte la biblioteca jQuery en el documento mediante la inclusión de una fuente pública, como las API de Google : <br> <p> < script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js "> < /script> <br> 4 <p> Agregue el código JavaScript para girar las imágenes en el <div> . Encuentre la imagen con la clase "activa " y seleccione la imagen siguiente en la lista. Si el tamaño de la imagen siguiente es cero, empezar a volver al principio de la lista con la primera imagen : <br> función <p> girar () { var <br> <p> activa = $ ("# girar activo. "); <br> <p> if ( $ (" . . . # girar activo ") . . next () longitud > 0 ) <br> <p> var next = $ (" # girar activa " ) junto (); <br> <p> más <br> <p> var next = $ ("# girar img: primero "); <br> 5 <p> Fundir la imagen con la clase "activa " fuera y desaparecer la imagen siguiente in Retire la clase "activa " de la imagen actual y asignarlo a la siguiente imagen : <br> <p> active.fadeOut ( "fast " , function () Página 6 <p> Programar un cronómetro para girar las imágenes cada cinco segundos, utilizando el método de " setInterval ": . <br> <p> $ (document ) ready ( function () { <br> <p> setInterval ( " rotar () " , 5000) ; <br> <p> } ) ; <br> <p> < /script > <br> <p> < /head> <br> 7 <p> Insert el <div> en el cuerpo del documento y asignar la clase "activa " a la primera imagen : <br> <p> <body> <br> <p> <div id="rotate"> <br> <p> < img src = " http://l.yimg.com/g/images/soup-discover.jpg " href = " 979 " alt = " 349 " = class " Image1 " = "activa "> <br> <p> < img src =" http://l.yimg.com/g/images/soup_hero_124.jpg.v1 " width =" " height =" 979 "alt =" 349 Image2 " > <br> <p> <img width="979" height="349" src="http://l.yimg.com/g/images/soup_hero_jessica.jpg.v1" alt="Image3"> ; <br> <p> <img width="979" height="349" src="http://l.yimg.com/g/images/soup_hero_alejokirchuk.jpg.v1" alt="Image4"> <br> <p> < /div > <br> <p> < /body> <br> <p> < /html> <br> 8 <p> Guardar el documento. Abre en un navegador y ver las imágenes en el <div> giran en la pantalla con un fundido de entrada y salida cada cinco segundos. <br> <br>
<div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Acerca-de-la-salida-de-datos-JSON-con-JavaScript-.html' >Acerca de la salida de datos JSON con JavaScript </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Los-mejores-Javascript-Sliders-Imagen-.html' >Los mejores Javascript Sliders Imagen </a> </div>
</div>
<dl class=xgc>
<dt><span>JavaScript Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-determinar-si-un-sitio-utiliza-JavaScript-redirecciones-.html">Cómo determinar si un sitio utiliza JavaScript redirecciones </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Listo-pero-con-errores-en-IE-JS-objeto-esperado-.html">Listo pero con errores en IE JS objeto esperado </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-reemplazar-los-códigos-Div-.html">Cómo reemplazar los códigos Div </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/¿Qué-Advertencia---Escritura-responde-Media-.html">¿Qué Advertencia : Escritura responde Media </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-el-texto-HTML-en-entrada-jQuery-.html">Cómo cambiar el texto HTML en entrada jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-configurar-los-archivos-PAC-Proxy-.html">Cómo configurar los archivos PAC Proxy </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-una-clase-de-matriz-en-Javascript-.html">Cómo utilizar una clase de matriz en Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-texto-a-números-enteros-en-JavaScript-.html">Cómo convertir texto a números enteros en JavaScript </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-deshabilitar-ActiveSync-Microsoft-.html" >Cómo deshabilitar ActiveSync Microsoft </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cálculos-JavaScript-con-decimales-.html" >Cálculos JavaScript con decimales </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-calcular-la-resolución-de-la-pantalla-con-Java-Script-.html" >Cómo calcular la resolución de la pantalla con Java Script </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-una-variable-de-PHP-con-JavaScript-.html" >Cómo cambiar una variable de PHP con JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Javascript-cuadrícula-Tutorial-.html" >Javascript cuadrícula Tutorial </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-actualizar-un-campo-de-pantalla-con-JavaScript-.html" >Cómo actualizar un campo de pantalla con JavaScript </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-aprender-Java-Script-gratis-.html" >Cómo aprender Java Script gratis </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-reemplazar-los-códigos-Div-.html" >Cómo reemplazar los códigos Div </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Javascript-y-expresiones-regulares-para-Códigos-postales-.html" >Javascript y expresiones regulares para Códigos postales </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-el-JW-Player-con-MP4-.html" >Cómo utilizar el JW Player con MP4 </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-comparar-los-objetos-de-fecha-en-JavaScript-.html" >Cómo comparar los objetos de fecha en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-comprobar-un-tipo-numérico-en-Javascript-.html" >Cómo comprobar un tipo numérico en Javascript </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html>
1
Crear un nuevo documento HTML con el Bloc de notas o un editor HTML. Inserte los encabezados de HTML en el documento :
< p>