http://wex.im/javascript/jquery-slider2
我用过这个来源。 这张幻灯片显示了这样的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>
答案 0 :(得分:1)
是的,可以通过jquery的帮助来完成这里是一个免费滑块下载和学习JSSOR SLIDER的链接
我认为这会有所帮助
答案 1 :(得分:1)
你可以使用一些更好的滑块,它有更好的api,并提供更多的功能..这个肯定会满足你的需要..检查出来。
以及适合您需求的演示..