如何使SrcollLeft自動畫廊

Question

即時通訊新的jquery ..我想做一個scrollLeft滑動畫廊..我做了以下bit..bt它幻燈片只有一次..它不連續滑動...我也想突出顯示當前幻燈片滑動..如何我可以做它..任何人都可以幫我嗎？

$(function(){ 
    var $thumbs= $('div.thumbs_wrapper'); 
    var scrollWidth= $('ul.thumbs li').width(); 
    var $single_Item=$('ul.thumbs li:first'); 

    singleWidth= $single_Item.outerWidth(); 
    scrollRight = singleWidth;  

    setInterval(function(){ 
     sliding(); 
    }, 1000); 

}); 

function sliding(n){ 
    var $thumbs= $('div.thumbs_wrapper'); 
    var scrollWidth= $('ul.thumbs li').width(); 
    $thumbs.animate({'scrollLeft':'+=' + singleWidth}, 'slow').scrollLeft(scrollWidth-scrollRight); 
    $('thumbs li a').each(function(){ 
     $(this).removeClass('active'); 
     if($(this).hasClass('imgage'+integer)){ 
      $(this).addClass('active'); 
     } 
    }); 
} 

這是我的html代碼

<div class=gallery_outer> 
    <div class="gallery_inner"> 
     <ul class="full_img"> 
      <li><img src="fullSize_image/1.jpg"/></li> 
      <li><img src="fullSize_image/2.jpg"/></li> 
      <li><img src="fullSize_image/3.jpg"/></li> 
      <li><img src="fullSize_image/4.jpg"/></li> 
      <li><img src="fullSize_image/5.jpg"/></li> 
      <li><img src="fullSize_image/6.jpg"/></li> 
     </ul> 
    </div> 
    <div class="thumbs_wrapper">   
     <ul class="thumbs"> 
      <li><img src="thumbnails/1.jpg" class="image1"/></li> 
      <li><img src="thumbnails/2.jpg" class="image2"/></li> 
      <li><img src="thumbnails/3.jpg" class="image3"/></li> 
      <li><img src="thumbnails/4.jpg" class="image4"/></li> 
      <li><img src="thumbnails/5.jpg" class="image5"/></li> 
      <li><img src="thumbnails/6.jpg" class="image6"/></li> 
     </ul> 
    </div> 
</div> 

這是我的CSS代碼

.gallery_outer{ 
    margin:15px; 
    width:390px; 
    height:430px; 
    border:5px solid #aaa; 
    border-radius:10px; 
    webkit-border-radius:10px; 
    box-shadow:2px 2px 5px 3px; 
    -moz-box-shadow:2px 2px 5px 3px; 
    webkit-box-shadow:2px 2px 5px 3px; 

} 
.gallery_inner{ 

} 
.full_img{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    position:relative; 
    height:282px; 
    width:17296px; 
    overflow: hidden; 
    /*left:-384px;*/ 
} 
.full_img li{ 
    display:inline; 
    float:left; 
    margin-left:0 !important; 
    padding:9px 8px; 
    position: absolute; 
    width:376px; 
    height:282px; 
} 
.full_img li img{ 
    width:376px; 
} 
.thumbs_wrapper{ 
    margin:0; 
    padding:0; 
    height:108px; 
    width:324px; 
    overflow:hidden; 
    float:left; 
} 
.thumbs{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    position:relative; 
    /*width:5336px;*/ 
    width:668px; 
    /*left:-108px;*/ 
} 
.thumbs li{ 
    display:inline; 
    float:left; 
    margin-left:0 !important; 
    padding:9px 8px; 
    width:100px; 
    height:100px; 
} 
.thumbs li img{ 
    width:100px; 
    height:100px; 
    cursor:pointer; 
} 
.active{ 
    border:5px solid red; 
} 

Answer 1

This is the closest I was able to come，我不知道你已經與有效位會是什麼，它沒沒有什麼意義，所以我沒有包括它。如果你能解釋你的想法是什麼，我可以嘗試修改我的答案以滿足你的需求。