Aqui vou postar o código que demonstrei aqui, na esperança de inspirar toda a inspiração para meus amigos. Combinei dois exemplos para implementá -lo aqui
.focus-item ul li.Item {text-align: Center;}. Scroll-area .prev, .Scroll-area .Next {Position: Absolute; Inferior: 590px; Largura: 29px; Altura: 64px; Opacidade: 0,6; estouro: oculto; Exibir: Nenhum; Indente de texto: -999px; Fronteira: Média Nenhum; Antecedentes: URL ('/imagens/arrowr.png') Scroll sem repetição 0% 0% transparente;}. Scroll-area .Prev {esquerda: 0px; Ações /*altura: 100px;* / /*estouro: oculto;* / esquerda: 63px; Posição: Absolute;} .focus-hd .Snext, .focus-hd .ssprev {float: esquerda; exibição: bloco; Largura: 14px; Altura: 47px; Indente de texto: -9999px; Antecedentes: URL ('/imagens/sprites1008.png') Scroll sem repetição 0px -3046px transparente;}. Focus-hd .Snext {Posição de fundo: 0px -2698px;} .focus-hd .show_bottom_nav {float: esquerda; margem: 0px 6px; exibição: embutido; Largura: 832px; Overflow: Hidden;}. Focus-hd .show_bottom_nav ul li {margin-left: 15px;}Código de demonstração HTML:
<div id=""> <div> <ul> <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" data-text-id="#thumbTxt1"> <img src="/attachments/news_gallery/20140528162328_454.jpg" /> </li> <li Dados-bottom-thumb = "/Andções/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2"> <img src = "/actingments/news_gallery/201405162328_733.jpg"/>>> href = "javascript: void (0)"> </a> <a href = "javascript: void (0)"> </a> </div> <div style = ""> <a href = "javascript: void (0)"> ← </a> <div> <ul> <li) Dados-Bottom-thumb = "/Anexamentos/News_Gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1" style = "float: esquerda"> <img src = "/anexos/news_gallery/20140528162888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888828_4, Data-Bottom-thumb = "/Anexações/News_Gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2" style = "float: esquerd"> <img src = "/anexos/news_gallery/201405281628_73.73.73.7. href = "javascript: void (0)"> → </a> </div> </div>
Código de script JS:
jQuery (". Scroll-area"). Slide ({titcell: '. Focus-hd li', malanell: ' .focus-item "). hover (function () {jQuery (this) .addclass (" bdon ")}, function () {jQuery (this) .removeclass ('bdon')}); // navegação de pequenas etiquetas jQuery (". slir. MAINCELL: "UL", Atraso no tempo: 100, Vis: 5, Efeito: "Esquerda", AutoPage: True, PrevCell: ". SPREV", NextCell: ". Snext"});