Здесь я опубликую код, который я продемонстрировал здесь, надеясь вдохновить все вдохновение для моих друзей. Я объединил два примера для его реализации здесь
.focus-item ul li.item {text-align: center;}. прокрутить area .prev, .scroll-area .next {position: Absolute; Внизу: 590px; Ширина: 29px; Высота: 64px; непрозрачность: 0,6; переполнение: скрыто; дисплей: нет; текстовый: -999px; Граница: Средний нет; Фон: url ('/images/arrillr.png') без повторного прокрутки 0% 0% прозрачный;}. Прокрутить Area .prev {слева: 0px; Фоно-позиция: -50px 0px;}. Прокрутить Area .next {справа: 0px;}. Scroll-area .bdon .prev, .scroll-area .bdon .next {display: block;} .scroll-area .focus-hd { /*width: 832px; /*Высота: 100px;* / /*переполнение: скрыто;* / слева: 63px; позиция: Absolute;} .focus-hd .snext, .focus-hd .sprev {float: left; дисплей: блок; Ширина: 14px; Высота: 47px; текстовый: -9999px; Фон: url ('/images/sprites1008.png') без повторного прокрутки 0px -3046px transparent;}. Focus-hd .snext {background-position: 0px -2698px;} .focus-hd .show_bottom_nav {float: Left; Покрас: 0px 6px; дисплей: inline; Ширина: 832px; переполнение: hidden;}. Focus-hd .show_bottom_nav ul li {margin-left: 15px;}Демо -код HTML:
<div id = ""> <div> <ul> <li data-bottom-thumb = "/atchally/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1" data-bottom-thumb = "/atchetments/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2"> <img src = "/atchalments/news_gallery/20140528162328_733.jpg"/> </li> href = "javascript: void (0)"> </a> <a href = "javascript: void (0)"> </a> </div> <div style = ""> <a href = "javaScript: void (0)"> ← </a> <ul> <ul> <li data-bottom-thumb = "/atchetments/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1" style = "float: left"> <img src = "/atchatments/news_gallery/2014052812328_454.jpg"/> <li data-bottom-thumb = "/atchetments/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2" style = "float: left"> <img src = "/atchatments/news_gallery/20140528162328_733.jpg"/> </li href = "javascript: void (0)"> → </a> </div> </div>
код скрипта JS:
jQuery (". Scroll-area"). Slide ({titcell: '. Focus-hd li', maincell: '. Focus-item ul', thirktime: 0, триггер: 0, Autoplay: true}); jQuery (".. Спроверка .focus-item "). Hover (function () {jQuery (this) .AdClass (" bdon ")}, function () {jQuery (this) .RemoveClass ('bdon')}); // Навигация маленьких тегов jQuery (". Scroll-area .show_bottom_nav "). MATECELL: «UL», Время задержки: 100, VIS: 5, эффект: «слева», AutoPage: True, Prevcell: «. Sprev», NextCell: «. Snext»});