No he actualizado recientemente, así que agregaré algunos efectos para enriquecerlo.
Ninguno de ellos embellece este paso.
Acordeón CSS puro:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> acorkion css </title> <style> .showbox {ancho: 660px; desbordamiento: oculto; } ul {list-style: none; margen: 0; relleno: 0; Ancho: 30000px; } ul li {float: izquierda; Posición: relativo; Altura: 254px; Ancho: 110px; desbordamiento: oculto; Transición: todos 0.3s; } /*Este es el núcleo del acordeón de CSS, que es el uso de Hover ** En primer lugar, UL: Hover Li desencadena cambios que han pasado a través de UL pero no a través de UL ** Entonces UL Li: Hover aquí están los cambios que se han pasado a través de LIB, que coinciden con los efectos de animación de CSS3 y algunos efectos de CSS3 en la embellecimiento de la página, puede hacer un acorde de buen acorde. Si usa la implementación de JS Pure, puede ser problemático. */ ul: hover li {ancho: 22px; } ul li: hover {ancho: 460px; } ul li img {ancho: 550px; Altura: 254px; } ul li span {ancho: 22px; Posición: Absoluto; arriba: 0; Derecha: 0; Altura: 204px; Top-top: 50px; Color: #fff; } ul li span.bg1 {fondo: #333; } ul li span.bg2 {fondo: #0f0; } ul li span.bg3 {fondo: #ff7500; } ul li span.bg4 {fondo: #0ff; } ul li span.bg5 {fondo: #00f; } </style> <script type = "text/javaScript"> </script> </head> <body> <div> <ul> <li> <span> Este es el primer </span> <img src = "1.jpg"> </li> <li> <li> <span> Este es el segundo </pan> <img src = "2.jpeg"> </li> <ri> <li> esto es el segundo </span> <img src = "2.jpeg"> </li> <ri> <sli> esto es el segundo </span> <img src = "2.jpeg"> </li> <ri> <li> esto es el segundo </span> <img src = "2.jpeg"> </li> <ri> <li> esto es el segundo </span> <img src = "2.jpeg"> </li> <ri> <sli> src = "3.jpg"> </li> <li> <span> Este es el cuarto </span> <img src = "4.jpg"> </li> <li> <span> Este es el quinto </span> <img src = "5.jpg"> </li> </ul> </div> </body> </html>CSS3 Accordion:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css3-checked: </title> <style>/* Use la función de opción única de la radio para lograr el efecto de acordeón*/UL {Display: Ninguno; } entrada {display: none;} etiqueta {display: block; Línea de altura: 40px; Border-Bottom: 1px Solid #DDD; cursor: puntero; tamaño de fuente: 15px; Font-Weight: Bold;} .List> Ul {Display: None; -WebKit-Transition: todos .5s lineales; -Moz-Transition: todos .5s lineales; -Ms-Transition: todos .5s lineales; -O-transición: todos .5s lineales; transición: all .5s lineal;} #list1: checked + ul {display: block;} #list2: checked + ul {display: block;} #list3: checked + ul {display: block;} #list4: checked + ul {display: block;} </style> </head> <body> <div> <label> <label para = "List1"> My ClassMate </Label> </ulcel> "Tipo de entrada =" Lista = "Nombre". id="list1" checked="chekced"/> <ul> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href = ""> nombre de compañero de clase </a> </li> <li> <a href = ""> Nombre de clase de clase </a> </li> <li> <a href = ""> classmate name </a> </li> <li> <a href = ""> nombre de clase </a> </li> <li> <a href = ">" href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href = ""> El nombre de ClassMate </a> </li> <li> <a href = ""> Nombre de clase de clase </a> </li> </ul> <etiqueta for = "list3"> mi compañero de clase </label> <input type = "radio =" list "id =" list3 "/> <ul> <li> <a href ="> classmate's name </ae> </li> </li> <A> <A> <A> href = ""> El nombre de ClassMate </a> </li> <li> <a href = ""> Nombre del compañero de clase </a> </li> <li> <a href = ""> el nombre de clase de clase </a> </li> <li> <a href = ">" name de clase </a> </li> <li> <a href = ">" <li> <a href = ""> El nombre de ClassMate </a> </li> </ul> <etiqueta for = "list4"> my classmate </label> <input type = "radio" name = "list" id = "list4"/> <ul> <li> <a href = ">"> classmate </a> </li> <li> href = ""> ClassMate </a> </li> <li> <a href = ""> classmate </a> </li> <li> <a href = ""> classmate </a> </li> </div> </body> </html>Acordeón implementado por JavaScript:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> acorcion </title> <style> .showbox {width: 660px; desbordamiento: oculto; } ul {list-style: none; margen: 0; relleno: 0; Ancho: 30000px; } ul li.active {ancho: 550px; } ul li {float: izquierda; Posición: relativo; Altura: 254px; Ancho: 22px; desbordamiento: oculto; } ul li img {ancho: 660px; Altura: 254px; } ul li span {ancho: 22px; Posición: Absoluto; arriba: 0; Izquierda: 0; Altura: 204px; Top-top: 50px; } ul li span.bg1 {fondo: #333; } ul li span.bg2 {fondo: #0f0; } ul li span.bg3 {fondo: #ff7500; } ul li span.bg4 {fondo: #0ff; } ul li span.bg5 {fondo: #00f; } </style> <script type = "text/javaScript"> window.onload = function () {createAcCordion ('. showbox'); }; function createAccordion (name) { /*get element* / var odiv = document.querySelector (nombre); /*Declarar ancho mínimo*/ var iminwidth = 9999999; /*get elemento*/ var ali = odiv.getElementsByTagName ('li'); var aspan = odiv.getElementsBytagName ('span'); /*Contenedor de temporizador predeterminado*/ odiv.timer = null; /*Bucle Agregar evento y valor de índice de atributo personalizado*/ for (vari = 0; i <aspan.length; i ++) {aspan [i] .index = i; aspan [i] .onmouseover = function () {gotoimg (odiv, this.index, iminwidth); }; /*Obtenga el ancho mínimo*/ iminWidth = Math.min (IMinWidth, Ali [i] .OffSetWidth); }}; function gotoImg (Odiv, iindex, iminWidth) {if (odiv.timer) { /*borrar el temporizador para evitar superposición* / clearInterval (odiv.timer); } /*Abra el temporizador* / odiv.timer = setInterval (function () {ChangeWidThinner (Odiv, iindex, IMinWidth);}, 30); } /*Esta es la clave, movimiento* / function ChangeWidThinner (Odiv, iindex, iminWidth) {var ali = odiv.getElementsBytagName ('li'); var aspan = odiv.getElementsBytagName ('span'); /*Obtenga el tamaño de la caja, este es el ancho total*/ var iwidth = odiv.offsetwidth; /*La declaración de ancho de la imagen sangrada*/ var w = 0; /*Declaración del juicio, para borrar la declaración del temporizador*/ var bend = true; /*Bucle para encender cada imagen, para obtener los elementos extendidos y encogidos*/ for (var i = 0; i <ali.length; i ++) {/*Esto es para obtener el índice extendido*/ if (i == iindex) {continuar; } /*Hay elementos que no tienen cambios, por lo que el ancho mínimo se guarda* / if (iminwidth == ali [i] .OffsetWidth) { /*ancho total reste estos anchos, porque también están en el ancho total* / iwidth- = iminwidth; continuar; } /*El código en el siguiente bucle es los elementos reducidos* / /*no borrar el temporizador, y no ha terminado de ejercer* / bend = false; / *Obtener velocidad, rápido primero y luego lento */speed = math.ceil ((ali [i] .OffsetWidth-iminWidth)/10); /*Reducir el ancho restante*/ w = ali [i] .OffsetWidth-speed; /*Para evitar que el elemento reducido sea menor que el ancho mínimo*/ if (w <= iminwidth) {w = iminwidth; } /*Establezca el ancho del elemento reducido* / ali [i] .style.width = w+'px'; /*Resta el ancho de encogimiento, el ancho restante es el ancho extendido*/ iWidth- = W; } /*Ancho del elemento extendido* / ali [iindex] .style.width = iWidth+'Px'; if (bend) {ClearInterval (Odiv.timer); odiv.timer = null; }} </script> </head> <body> <div> <ul> <li> <span> Este es el primer </span> <img src = "1.jpg"> </li> <li> <span> Este es el segundo </span> <img src = "2.jpeg"> </li> <li> <span> Este es el tercer </span> <omg sg sg sg srcgg " <li> <span> Este es el cuarto </span> <img src = "4.jpg"> </li> <li> <span> Este es el quinto </span> <img src = "5.jpg"> </li> </ul> </div> </body> </html>>Lo siguiente será usar efectos de animación, para encapsular el movimiento:
/*Use llamadas, Obj Object, Attr Attribute, Velocidad de velocidad, el valor que ITARGET quiere lograr, FN FINT Función*//*porque los movimientos están básicamente en unidades de PX, en cuanto a la transparencia, no hay unidad, por lo que la separo aquí. De hecho, no lo cambié mucho, solo juzgué si es el atributo de transparencia, y luego vaya a la línea de transparencia*/ function Domove (obj, attr, velocidad, target, fn) {if (attr == "opacidad") {obj.len = itARGet-parsefloat (getStyle (obj, "opacidad"))*100; } else {obj.len = ITARGET-PARSEFLOAT (getStyle (obj, "opacidad")); } /*La dirección aquí se juzga. El después del punto inicial es negativo y el antes del punto inicial es positivo*/ speed = obj.len> 0? Velocidad: -speed; ClearInterval (obj.timer); obj.timer = setInterval (function () {if (! Obj.num) {obj.num = 0;} if (attr == "opacidad") {obj.num = parsefloat (getStyle (obj, attr))*100+velocidad;} else {obj.num = parseint (getStyle (obj, att)+velocidad;} /* Alcanzado, detenga el temporizador cuando haya llegado*/ if (obj.num> = ITARGET && obj.len> 0 || obj.num <= ITARGET && obj.len <0) {obj.num = ITARGET obj.style [attr] = obj.num+"px"; } /*Si obtiene el valor del atributo CSS, obtendrá el valor del rendimiento* / function getStyle (obj, attr) {return obj.currentStyle? Obj.currentStyle [attr]: getComputedStyle (obj) [attr]; }Imagen de carrusel:
<! DOCTYPE HTML> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> Carousel Diagram </title> <!-Esta es una referencia a la función de movimiento encapsulado-> <script type = "text/javascript" src = "doMove.js"> </script> <script type = "text/javaScript" /*Llame para implementar Carousel* / Carousel ("Carousel")} function Carousel (name) {var oscl = document.getElementById (nombre); var oUl = OSCL.QuerySelector ("UL"); var ali = oUl.QueryselectorAll ("li"); var next = document.getElementById ("Next"); var pre = document.getElementById ("pre"); var aindex = oscl.QuerySelectorAll (". Index Span"); var num = 0; índice var = 0; /*Dé el nivel más alto de la primera imagen*/ ali [0] .style.zindex = 5; /*Juzga si el temporizador existe*/ if (! Oscl.timer) {oscl.timer = null; } /*Este es el carrusel automático en* / oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); /*Mostrar y esconderse en las páginas superiores e inferiores*/ OSCL.OnMouseOver = function () {/*Mover en el temporizador de parada*/ ClearInterval (OSCL.Timer); next.style.display = "bloque"; pre.style.display = "bloque"; } oscl.onmouseOut = function () {next.style.display = "Ninguno"; pre.style.display = "Ninguno"; /*Mudarse en el temporizador*/ oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); } /*Haga clic en la página anterior y siguiente* / next.onclick = function () {num ++; num%= Ali.length; jugar(); } pre.Onclick = function () {if (! Ali [index]) {index = num; } num--; if (num <0) {num = ali.length-1; } jugar(); } /*Punto de índice* / for (var i = 0; i <aindex.length; i ++) {aindex [i] .index = i; aindex [i] .onmouseover = function () {num = this.index; jugar(); }} /*Función de ejecución de animación* /function play () { /*Simplemente determine si es el mismo punto de activación, como los dos movimientos del punto de índice son los mismos. Si no se ejecuta, evite la ejecución repetida continuamente*/ if (index! = Num) {for (var i = 0; i <ali.length; i ++) {/*Establezca todos los niveles en 1*/ ali [i] .style.zindex = 1; } /*Establezca el nivel del último carrusel en 2* / ali [index] .style.zindex = 2; aindex [index] .classname = ""; aindex [num] .classname = "activo"; índice = num; /*Establezca la transparencia de la figura de este carrusel en 0*/ ali [num] .style.opacity = 0; /*Establezca el nivel de la figura que es un carrusel a 5*/ ali [num] .style.zindex = 5; /*Encapsulación de la función de movimiento, desvanecerse de esta imagen*/ DOMOVE (ALI [NUM], "Opacidad", 10,100); }}} </script> <style> a {text-decoration: none; Color: #555; } #Carousel {Font-Family: "Microsoft Yahei"; Posición: relativo; Ancho: 800px; Altura: 400px; margen: 0 auto; } #Carousel ul {list-style: none; margen: 0; relleno: 0; Posición: relativo; } #Carousel ul Li {posición: Absolute; índice z: 1; arriba: 0; Izquierda: 0; } .imgbox img {ancho: 800px; Altura: 400px; } .btn {posición: absoluto; Índice Z: 10; arriba: 50%; Ancho: 45px; Altura: 62px; margen -top: -31px; Text-Align: Center; Línea de altura: 62px; tamaño de fuente: 40px; Antecedentes: RGBA (0,0,0,0.4); Opacidad: alfa (opacidad = 50); Pantalla: ninguno; } #pre {izquierda: 0; } #Next {Right: 0; } #Carousel .index {posición: Absolute; Abajo: 10px; Izquierda: 50%; Índice Z: 10; } #carusel .index span {width: 15px; Altura: 15px; Radio fronterizo: 50%; Antecedentes: #87CEFA; Pantalla: bloque en línea; Shadow de caja: 1px 1px 6px #4169E1; } #Carousel .index span.active {fondo: #4169E1; Shadow de caja: 1PX 1PX 6PX #87 CETFA INSET; } </style></head><body> <div id="carousel"> <ul> <li><a href="#"><img src="1.jpg"></a></li> <li><a href="#"><img src="2.jpg"></a></li> <li><a href="#"><img src = "2.jpg"> </a> </li> <li> <a href = "#"> <img src = "3.jpg"> </a> </li> <li> <a href = "#"> <img src = "4.jpg"> </a> </li> <li> <a href = "#"> <imgg src = "5.jpg"> </a> </li> </ul> <a href = "javascript :;" id = "Next" >> </a> <a href = "javascript :;" id = "pre"> <</a> <viv> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </div> </body> </html>Esto se realiza usando complemento: Responsiveslides.js
Basado en jQuery
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> <!-Introducción de complementos JS y jQuery-> <script src = "jQuery-2.0.3.js"> </script> <script src = "hazussivelides.js"> </</script> </script> <s script> </script> <syly> <syly> <syle> <syle> relativo; Ancho: 800px; } /* El atributo CSS predeterminado del complemento* / .rslides {posición: relativo; Estilo de lista: Ninguno; desbordamiento: oculto; Ancho: 100%; relleno: 0; margen: 0; } .rslides li {-webkit-backface-visibilidad: hidden; Posición: Absoluto; Pantalla: ninguno; Ancho: 100%; Izquierda: 0; arriba: 0; } .rslides Li: First-Child {Position: relativo; Pantalla: bloque; flotante: izquierda; } .rslides img {display: block; Altura: Auto; flotante: izquierda; Ancho: 100%; borde: 0; } /*, modificado, modificado en el botón DOT* / UL.RSLIDES_TABS.RSLIDES1_TABS {posición: absoluto; Abajo: 10px; Izquierda: 45%; Estilo de lista: Ninguno; Índice Z: 10; } ul.rslides_tabs.rslides1_tabs li {float: izquierda; } ul.rslides_tabs.rslides1_tabs li a {display: block; Radio fronterizo: 50%; Ancho: 10px; Altura: 10px; margen-derecha: 10px; Antecedentes: #fff; } / * .rslides_here esto es equivalente a activo * / ul.rslides_tabs.rslides1_tabs li.rslides_here a {fondo: #004f88; } /* nombre de clase de los botones izquierdo y derecho* / .rslides_nav.rslides1_nav {posición: absoluto; arriba: 50%; Color: #EEE; tamaño de fuente: 40px; Decoración de texto: ninguna; índice z: 4; } .rslides_nav.rslides1_nav.pre {izquierda: 10px; } .rslides_nav.rslides1_nav.next {right: 10px; } .rslides img {altura: 400px; } </style> <script> $ (function () {$ (". pausecontrols: true, // boolean: pausa al pasar el paso de controles, verdadero o falso previo: "<", // modifica los símbolos de los botones izquierdo y derecho NextText: ">", // string: text para el botón "siguiente" "Maxwidth": "800px"}); $ ("#banner"). mouseover (function () {$ (". rslides1_nav"). css ("visual Use un DIV para envolverlo, y esas etiquetas agregadas por JS se cargarán directamente detrás de la etiqueta UL-> <div id = "banner"> <ul id = "rslides"> <li> <img src = "111.jpg"> </si> </> <img src = "222.jpg"> </i> <i> <i> <iMg src = "333.jpg" </li> <li> </li> <li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <i-li> </li> </li> <i ". <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li> </ul> </div> </body> </html>Diapositiva de imagen:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Image Sliding </title> <syle> .Container {posición: relativo; Ancho: 630px; Border: 2px Solid #888; relleno: 5px; } .c-wrap {ancho: 630px; desbordamiento: oculto; } .container img {ancho: 200px; Altura: 90px; } .container ul {list-style: none; margen: 0; relleno: 0; } .Container ul li {float: izquierda; margen-derecha: 10px; } .container .imgbigbox {ancho: 33000px; margen-izquierda: 0px; } .ImgBigBox: After {content: ""; Pantalla: bloque; claro: ambos; } .btngroup {border: 1px sólido #888; Ancho: 65px; } .btngroup a {text-align: Center; Línea de altura: 20px; Decoración de texto: ninguna; Color: #888; tamaño de fuente: 20px; Pantalla: bloque en línea; Ancho: 30px; } .btn1 {margin-right: 4px; Border-Right: 1px Solid #888; } </style> <!-citando la función de movimiento-> <script type = "text/javaScript" src = "domave.js"> </script> <script type = "text/javaScript"> window.onload = function () {/*Función de llamar para lograr Sliding*/Slide (". ContENTAER"); } function slide (name) {var ocontainer = document.queryselector (nombre); var oimgbigbox = ocontainer.queryselector (". imgbigbox"); var abtn = ocontainer.queryselectorAll (". BtnGroup a"); var oC_Wrap = Ocontainer.QuerySelector (". C-Wrap"); /*Obtenga el ancho deslizante*/ var w w = oc_wrap.offsetWidth; /*Haga clic en el botón izquierdo*/ abtn [0] .Onclick = function () {dOMOVE (oimgBigBox, "marginleft", 10, -w, function () {var child = oimgbigbox.children [0] .clonenode (true); oimgbigbox.appendChild (child); oimgBigBox.RemoVechild (oimgBigBox.Children [0]); oimgbigbox.insertbefore (oimgbigbox.children [1], oimgbigbox.children [0]); oimgbigbox.style.marginleft = -w+"px"; doMove(oImgBigBox,"marginLeft",10,0) } } </script></head><body> <div> <div> <div> <ul> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> </ul> <ul> <li> <img src = "4.jpg"> </li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </div> </div> <div> <a href = "javaScript:"> </a> </div> </div> </boderLo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.