Ici, je publierai le code que j'ai démontré ici, dans l'espoir d'inspirer toute l'inspiration pour mes amis. J'ai combiné deux exemples pour l'implémenter ici
.focus-item ul li.item {text-align: Center;}. Scroll-Area .Prev, .Scroll-Area .Next {position: Absolute; En bas: 590px; Largeur: 29px; Hauteur: 64px; Opacité: 0,6; débordement: caché; Affichage: aucun; Texte-indent: -999px; Border: Moyen Aucun; Contexte: URL ('/ images / arrowlr.png') Scroll sans répétition 0% 0% transparent;}. Scroll-Area .Prev {Left: 0px; Position en arrière-plan: -50px 0px;}. Scroll-Area .Next {droite: 0px;}. Scroll-Area .Bdon .Prev, .Scroll-Area .Bdon .Next {Affichage: Block;} .scroll-Area .Focus-HD {/ * Width: 832px; * / / * gauche: 60px; / * hauteur: 100px; * / / * débordement: caché; * / gauche: 63px; Position: Absolute;} .focus-hd .snext, .focus-hd .sprev {float: left; Affichage: bloc; Largeur: 14px; hauteur: 47px; Texte-indent: -9999px; Contexte: URL ('/ images / sprites1008.png') Scroll sans répétition 0px -3046px transparent;}. focus-hd .snext {fond de fond: 0px -2698px;} .focus-hd .show_bottom_nav {float: gauche; marge: 0px 6px; Affichage: en ligne; Largeur: 832px; Overflow: Hidden;}. focus-hd .show_bottom_nav ul li {margin-left: 15px;}Code de démonstration HTML:
<div id = ""> <div> <ul> <li data-bottom-thumb = "/ joints / news_gallery / 20140528162328_454.jpg" data-text-id = "# thumbtxt1"> <img src = "/ joints / news_gallery / 20140528162328_454.jpg" /> </ li> data-bottom-thumb = "/ joints / news_gallery / 20140528162328_733.jpg" data-text-id = "# thumbtxt2"> <img src = "/ joints / news_gallery / 20140528162328_733.jpg" /> </li> </ul> <A href = "javascript: void (0)"> </a> <a href = "javascript: void (0)"> </a> </div> <div style = ""> <a href = "javascrip data-bottom-thumb = "/ joints / news_gallery / 20140528162328_454.jpg" data-text-id = "# thumbtxt1" style = "float: left"> <img src = "/ joints / news_gallery / 20140528162328_454.jpg" /> </ li> data-bottom-thumb = "/ joints / news_gallery / 20140528162328_733.jpg" data-text-id = "# thumbtxt2" style = "float: left"> <img src = "/ joints / news_gallery / 20140528162328_733.jpg" /> </ li> href = "javascript: void (0)"> → </a> </div> </div>
JS Code de script:
jQuery (". Scroll-Area"). Slide ({titcell: '. focus-hd li', MainCell: '. focus-item ul', delaytime: 0, Trigger: 0, AutoPlay: true}); jQuery (". Scroll-Area .focus-item "). hover (function () {jQuery (this) .AddClass (" bdon ")}, function () {jQuery (this) .removeclass ('bdon')}); // navigation de petites tags jQuery (". Scroll-area .show_bottom_nav "). MAINCELL: "UL", DelayTime: 100, Vis: 5, Effet: "Left", AutoPage: True, PrevCell: ". Sprev", NextCell: ". Snext"});