2014-09-24 35 views
0

http://wex.im/javascript/jquery-slider2jQuery幻燈片圓形按鈕(pre-next)自定義

我用這個來源。 這個幻燈片放映像這樣的前一個按鈕 - >●●... 而且我想顯示這樣的按鈕 - >①②...(編號+ BG顏色)

這可能嗎? 如果這是可能的,我應該修復什麼語言(代碼?)? 例如CSS,jQuery的,HTML ...

按鈕CSS代碼

.jquery-slider-pages { 
    overflow: visible; 
    position: absolute; 
    left: 5px; 
    bottom: 5px; 
    height: 20px; 
    right: 5px; 
} 
.jquery-slider-page { 
    overflow: hidden; 
    position: relative; 
    display: block; 
    float: right; 
    width: 12px; 
    height: 12px; 
    padding: 0; 
    margin: 0; 
    background: #999; 
    cursor: pointer; 
    opacity: 0.33; 
    margin: 3px; 
    behavior:url("https://dwp.konami/j-com/PIE.htc"); 
    border-radius: 6px; 
    box-shadow: #333 0 0 2px; 
} 
.jquery-slider-page:hover { 
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5); 
} 
.jquery-slider-page-current { 
    opacity: 0.8; 
    background: #1C1C1C; 
} 

按鈕jQuery代碼

var _draw=function() 
{ 
    $this.addClass('jquery-slider-sliding'); 
    if(settings.showProgress) 
    { 
     $this.find('.jquery-slider-page').removeClass('jquery-slider-page-current'); 
     $this.find('.jquery-slider-page:eq('+(_this.nextAll('.jquery-slider-element').length)+')').addClass('jquery-slider-page-current'); 
    } 
    settings.slidebefore(_this, 
    $this); 

    if(settings.direction=='right') 
    { 
     _this.show().css('left', 
     -settings.width); 
    } 
    else 
    { 
     _this.show().css('left', 
     settings.width); 
    } 

    _this.stop(true,true).animate(
    {'left':(settings.direction=='right'?'+=':'-=')+settings.width+'px'}, 
     { 
      'duration':settings.fade, 
      'complete':function() 
      { 
       settings.slideafter(_this, 
       $this); 
       $this.removeClass('jquery-slider-sliding'); 
      } 
     } 
    ); 

    if(_last) 
    { 
     _last.stop(true,true).animate({'left':(settings.direction=='right'?'+=':'-=')+settings.width+'px'},{'duration':settings.fade}); 
    } 
}; 

HTML代碼

<div id='slider'> 
<div id ='link'> 
<a href='test.html'target ='_blank'> 
TEST</a> 
</div> 
<div id ='link'> 
<a href='test2.html'target ='_blank'> 
TEST2</a> 
</div> 
</div> 

回答

1

是的,它可以通過jQuery的這裏的幫助下,做的是自由浮動塊的鏈接下載和學習JSSOR SLIDER

我認爲這將是幫助

+0

謝謝您的回答! – user3273401 2014-09-24 07:24:04