Hier werde ich den Code veröffentlichen, den ich hier demonstriert habe, in der Hoffnung, alle Inspirationen für meine Freunde zu inspirieren. Ich habe zwei Beispiele kombiniert, um es hier zu implementieren
.Focus-item ul li.item {text-align: center;}. scroll-area .prev,. unten: 590px; Breite: 29px; Höhe: 64px; Deckkraft: 0,6; Überlauf: versteckt; Anzeige: Keine; Text -Indent: -999px; Grenze: Mittel keine; Hintergrund: URL ('/Images/Arrawlr.png') No-Repeat Scroll 0% 0% transparent;}. Scroll-Area .Prev {links: 0px; Hintergrundposition: -50px 0px;}. Scroll-Area .Next {rechts: 0px;}. Scroll-Area .bdon .prev,. /*Höhe: 100px;* / /*Überlauf: versteckt;* / links: 63px; Position: absolut;} .focus-hd .snext,. Anzeige: Block; Breite: 14px; Höhe: 47px; Text -Indent: -9999px; Hintergrund: URL ('/Images/Sprites1008.png') No-Repeat Scroll 0px -3046px transparent;}. Rand: 0px 6px; Anzeige: Inline; Breite: 832px; Überlauf: versteckt;}.HTML -Demo -Code:
<div id = ""> <div> <ul> <li data-bottom-thumb = "/continments/news_galery/20140528162328_454.jpg" data-text-id = "#thumbtxt1"> <img src = "/containments/news_gallery/2014052816232328_"/20140528162328_454./> < data-bottom-thumb = "/anhängen/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2"> <img src = "/containments/news_gallery/20140528162328_733.jpg"/> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </ull href = "javaScript: void (0)"> </a> <a href = "javaScript: void (0)"> </a> </div> <div style = ""> <a href = "javascript: void (0)" data-bottom-thumb = "/anhängen/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1" style = "float: links"> <img Src = "/Anhänge/news_gallery/2014052816232328_454.jpg"/</li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li. Data-Bottom-Thumb = "/Anhänge/News_Gallery/20140528162328_733.jpg" Data-text-id = "#thumbtxt2" style = "float: links"> <img Src = "/Anhänge/News_Galery/20140528162328_733.jpg"/<ul> <ull> <<al> <a. href = "javaScript: void (0)"> → </a> </div> </div>
JS -Skriptcode:
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 von kleinen Tags jquery (". Maincell: "ul", Delaytime: 100, vis: 5, Effekt: "Left", Autopage: True, Prevcell: ". Sprev", NextCell: ". Snext"});