Aquí publicaré el código que demostré aquí, con la esperanza de inspirar toda la inspiración para mis amigos. He combinado dos ejemplos para implementarlo aquí
.focus-item ul li.Item {text-align: center;}. Scroll-Area .prev, .scroll-Area .next {posición: absoluta; Abajo: 590px; Ancho: 29px; Altura: 64px; Opacidad: 0.6; desbordamiento: oculto; Pantalla: ninguno; text -indent: -999px; borde: medio ninguno; Antecedentes: url ('/images/arcowlr.png') sin repetición de desplazamiento 0% 0% transparente;}. Scroll-área .prev {izquierda: 0px; Posición de fondo: -50px 0px;}. Scroll-AREA .Next {derecha: 0px;}. Scroll-AREA .Bdon .Prev, .Scroll-AREA .BDON .NEXT {Display: Block;} .Scroll-AREA .focus-HD { /*width: 832px;* /*izquierda: 60px;* /*altura: 100px;* / /*desbordamiento: oculto;* / izquierda: 63px; posición: absoluto;} .focus-hd .snext, .focus-hd .sprev {float: izquierda; Pantalla: bloque; Ancho: 14px; Altura: 47px; text -indent: -9999px; Antecedentes: URL ('/Images/Sprites1008.png') No-Repeat Scroll 0px -3046px transparente;}. Focus-HD .snext {Posición de fondo: 0px -2698px;} .focus-hd .show_bottom_nav {float: izquierdo; margen: 0px 6px; Pantalla: en línea; Ancho: 832px; desbordamiento: Hidden;}. Focus-hd .show_bottom_nav ul li {margen-izquierda: 15px;}Código de demostración de HTML:
<div id = ""> <div> <ul> <li data-bottom-thumb = "/apego/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1"> <img src = "/adjuntos/news_gallery/20140528162328_454.jpg"/lii data-bottom-thumb = "/apeurios/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2"> <img src = "/apeurios/news_gallery/20140528162328_733.jpg"/> </li> </ul> <a a a una href = "javascript: void (0)"> </a> <a href = "javascript: void (0)"> </a> </iv> <div style = ""> <a href = "javaScript: void (0)"> ← </a> <iv> <l> <l> <l> data-bottom-thumb = "/apego/news_gallery/20140528162328_454.jpg" data-text-id = "#Thumbtxt1" style = "float: izquierda"> <img src = "/adjuntos/news_gallery/20140528162328_454.jpg"/> <</</</</li> <li> <li> data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" data-text-id="#thumbTxt2" style="float: left"> <img src="/attachments/news_gallery/20140528162328_733.jpg" /> </li> </ul> </div> <a href = "javascript: void (0)"> → </a> </div> </div>
Código de script JS:
jQuery (". Scroll-Area"). Slide ({TitCell: '. Focus-HD Li', MainCell: '. .focus-item "). Hover (function () {jQuery (this) .addclass (" bdon ")}, function () {jQuery (this) .removeclass ('bdon')}); // navegación de etiquetas pequeñas jQuery (". scroll-aarea .show_bottom "). MainCell: "UL", DelayTime: 100, Vis: 5, Efecto: "Left", Autopage: True, Prevcell: ". Sprev", NextCell: ". Snext"});