هنا سأقوم بنشر الكود الذي أظهرته هنا ، على أمل إلهام كل الإلهام لأصدقائي. لقد جمعت مثالين لتنفيذها هنا
.focus-item ul li.item {text-align: center ؛}. scroll-area .prev ، .scroll-area. next {position: absolute ؛ أسفل: 590 بكسل ؛ العرض: 29px ؛ الارتفاع: 64px ؛ العتامة: 0.6 ؛ الفائض: مخفي. العرض: لا شيء ؛ استولى النص: -999px ؛ الحدود: متوسطة لا شيء ؛ الخلفية: url ('/Images/arrowlr.png') no-repeat scroll 0 ٪ 0 ٪ شفافية ؛}. scroll-area .prev {left: 0px ؛ الخلفية-الموضع: -50px 0px ؛}. التمرير-منطقة .next {يمين: 0px ؛}. scroll-area .bdon .prev ، .scroll-area .bdon .next {display: block ؛} .scroll-area. /*الارتفاع: 100px ؛* / /*verflow: Hidden ؛* / Left: 63px ؛ الموضع: absolute ؛} .focus-hd .snext ، .focus-hd .sprev {float: left ؛ العرض: كتلة ؛ العرض: 14px ؛ الارتفاع: 47 بكسل ؛ استقلال النص: -9999px ؛ الخلفية: url ('/images/sprites1008.png') no-repeat scroll 0px -3046px شفاف ؛}. الهامش: 0px 6px ؛ العرض: مضمّن ؛ العرض: 832px ؛ الفائض: مخفي ؛HTML Demo Code:
<div id = ""> <viv> <ul> <li data-bottom-thumb = "/expantments/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1"> <img src = "/inclesments_gallery/201405281628_454.jpn> </ivegn </li> <s البيانات bottom-thumb = "/المرفقات/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2"> <img src = "/antainments/news_gallery/20140528162328_733.jpg"/> </li> href = "javaScript: void (0)"> </a> <a href = "javaScript: void (0)"> </a> </viv> <div style = ""> <a href = "javaScript: void (0)"> ← <viv> <ul> بيانات bottom-thumb = "/المرفقات/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1" style = "float: left"> <img src = "/fachentments/news_gallery/20140528162328_454.jpg data-bottom-thumb = "/factionments/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2" style = "float: left"> <img src = "/expantments/news_gallery/20140528162328_733.jpg href = "javaScript: void (0)"> → </a> </viv> </viv>
رمز نص JS:
jQuery (". Scroll-area"). Slide ({titcell: '. Focus-Hd li' ، maincell: ' .focus-item "). hover (function () {jQuery (this) .addClass (" bdon ")} ، function () {jQuery (this) .removeclass ('bdon')}) ؛ Maincell: "UL" ، وقت التأخير: 100 ، Vis: 5 ، التأثير: "Left" ، Autopage: True ، Prevcell: ". Sprev" ، NextCell: ". Snext"}) ؛