ที่นี่ฉันจะโพสต์รหัสที่ฉันแสดงที่นี่หวังว่าจะสร้างแรงบันดาลใจทั้งหมดสำหรับเพื่อนของฉัน ฉันได้รวมสองตัวอย่างเพื่อนำไปใช้ที่นี่
.focus-item ul li.item {text-allign: center;}. scroll-area .prev, .scroll-area .next {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 590px; ความกว้าง: 29px; ความสูง: 64px; ความทึบ: 0.6; ล้น: ซ่อน; แสดง: ไม่มี; Text -Indent: -999px; ชายแดน: Medium None; ความเป็นมา: url ('/images/arrowlr.png') ไม่มีการเลื่อนซ้ำ 0% 0% โปร่งใส;}. Scroll-area .prev {ซ้าย: 0px; ตำแหน่งพื้นหลัง: -50px 0px;}. Scroll-Area .next {ขวา: 0px;}. Scroll-area .Bdon .prev, .scroll-area .Bdon .Next {แสดง: block;} .Scroll-area. /*ความสูง: 100px;* / /*ล้น: ซ่อน;* / ซ้าย: 63px; ตำแหน่ง: สัมบูรณ์;} .focus-hd .snext, .focus-hd .sprev {float: ซ้าย; แสดง: บล็อก; ความกว้าง: 14px; ความสูง: 47px; Text -Indent: -9999px; ความเป็นมา: url ('/images/sprites1008.png') ไม่มีการทำซ้ำเลื่อน 0px -3046px โปร่งใส;}. focus-hd .snext {ตำแหน่งพื้นหลัง: 0px -2698px;} .focus-hd. show_bottom_nav {float: ซ้าย; มาร์จิ้น: 0px 6px; แสดง: อินไลน์; ความกว้าง: 832px; Overflow: Hidden;}. Focus-hd. show_bottom_nav ul li {margin-left: 15px;}รหัสสาธิต HTML:
<div id = ""> <div><ul> <li data-bottom-thumb = "/attightments/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtx data-bottom-thumb = "/attightments/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxpt2"> <img src = "/attightments/news_gallery/20140528162328_733 href = "javascript: void (0)"> </a> <a href = "JavaScript: void (0)"> </a> </v> <div style = ""> <a href = "JavaScript: void (0)"> ← </a> data-bottom-thumb = "/เอกสารแนบ/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1" style = "float: left"> <img src = " data-bottom-thumb = "/เอกสารแนบ/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxpt2" style = "float: left"> <img src = "/atthedments/news_gallery/20140528162328_7333 href = "JavaScript: void (0)"> → </a> </div> </div>
รหัสสคริปต์ JS:
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 (นี้) .addclass (" bdon ")}, function () {jQuery (นี่) .removeclass ('bdon')}); Maincell: "UL", Delaytime: 100, Vis: 5, Effect: "Left", Autopage: True, Prevcell: ". Sprev", NextCell: ". snext"});