여기에 나는 여기에 보여준 코드를 게시하여 친구들에게 영감을주기를 희망합니다. 여기에서 구현하기 위해 두 가지 예를 결합했습니다
.focus-item ul li.item {text-align : center;}. scroll-area .prev, .scroll-area .next {position : 절대; 하단 : 590px; 너비 : 29px; 높이 : 64px; 불투명도 : 0.6; 오버플로 : 숨겨진; 디스플레이 : 없음; 텍스트 안정 : -999px; 국경 : 중간 없음; 배경 : URL ( '/images/arrowlr.png') No-Repeat 스크롤 0% 0% 투명;}. 스크롤-영역 .prev {왼쪽 : 0px; 배경 위치 : -50px 0px;}. Scroll-Area .next {right : 0px;}. Scroll-Area .Bdon .prev, .scroll-area .bdon .next {display;} .scroll-area .focus-hd { /*width : 832px;* / /* / /* / /* / /* / /* / /* / /* / /* / /* / /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /*. /*높이 : 100px;* / /*오버플로 : 숨겨진;* / 왼쪽 : 63px; 위치 : 절대;} .focus-hd .snext, .focus-hd .sprev {float : 왼쪽; 디스플레이 : 블록; 너비 : 14px; 높이 : 47px; 텍스트 안정 : -9999px; 배경 : URL ( '/images/sprites1008.png') No-Repeat 스크롤 0px -3046px 투명;}. focus-hd .snext {backgreing-position : 0px -2698px;} .focus-hd .show_bottom_nav {float : 왼쪽; 마진 : 0px 6px; 디스플레이 : 인라인; 너비 : 832px; 오버플로 : 숨겨진;}. focus-hd .show_bottom_nav ul li {margin-left : 15px;}HTML 데모 코드 :
<div id = ""> <div> <ul> <li data-bottom-thumb = "/autchments/news_gallery/20140528162328_454.jpg"data-text-id = "#thumbtxt1"> <img src = "/att Data-Bottom-Thumb = "/autchments/news_gallery/20140528162328_733.jpg"data-text-id = "#thumbtxt2"> <img src = "/autchments/news_gallery/20140528162328_7333.jpg"/> </li> </li> <a href = "javaScript : void (0)"> </a> <a href = "javaScript : void (0)"> </a> </div> <div style = ""> <a href = "javaScript : void (0)"> ← ← ← ← ← ← ← ← ← </a> <li> <li Data-Bottom-Thumb = "/autchments/news_gallery/20140528162328_454.jpg"data-text-id = "#tumbtxt1"style = "float : left"> <img src = "/autchments/news_gallery/201405281628_454.jpg"/li> <li Data-Bottom-Thumb = "/autchments/news_gallery/20140528162328_733.jpg"data-text-id = "#tumbtxt2"style = "float : left"> <img src = "/autchments/news_gallery/201405281628_733.jpg"/li> </li>/li>/li>/li> </li> </li> </li> </li> </li> </li> </li> href = "javaScript : void (0)"> → </a> </div> </div>
JS 스크립트 코드 :
jQuery ( ". Scroll-Area"). 슬라이드 ({titcell : '. focus-hd li', maincell : '. focus-item ul', Delaytime : 0, trigger : 0, autoplay : true}); jQuery ( ". Scroll-Area .focus-item "). hover (function () {jQuery (jQuery (this) .addclass ("bdon ")}, function () {jQuery (this) .removeClass ( 'bdon')}); // 작은 태그 jQuery (". Scroll-Area .show_bottom_nav ". Maincell : "Ul", Delaytime : 100, Vis : 5, 효과 : "왼쪽", 자동화 : True, Prevcell : ". Sprev", NextCell : ". snext"});