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>
謝謝您的回答! – user3273401 2014-09-24 07:24:04