Javascript jQuery:如何实现滑块控制器(旋转木马)?
我已经使用jQuery构建了一个滑块,效果很好。这是一个快速的开发,所以没有时间添加控制器。现在很难为旋转木马安装控制器 有没有解决方案或替代方案来解决这个问题 演示Javascript jQuery:如何实现滑块控制器(旋转木马)?,javascript,jquery,html,css,carousel,Javascript,Jquery,Html,Css,Carousel,我已经使用jQuery构建了一个滑块,效果很好。这是一个快速的开发,所以没有时间添加控制器。现在很难为旋转木马安装控制器 有没有解决方案或替代方案来解决这个问题 演示 $.fx.speeds._default = 1000; function slider(container) { var currPg = null, firstPg = null; container.find('> .pg').each(function (idx, pg) {
$.fx.speeds._default = 1000;
function slider(container) {
var currPg = null,
firstPg = null;
container.find('> .pg').each(function (idx, pg) {
pg = $(pg);
var o = {
testimonial: pg.find('> .testimonial'),
thumb: pg.find('> .testimonial-thumb'),
pg: pg
};
o.pg.css({
position: 'absolute',
width: '100%',
height: '100%',
});
if (idx > 0) {
o.pg.css({
opacity: 0,
'z-index': -1
});
o.testimonial.css({
'margin-left': '100%'
});
o.thumb.css({
'bottom': '-100%'
});
} else {
firstPg = o;
}
o.prev = currPg;
if (currPg) {
currPg.next = o;
}
currPg = o;
});
firstPg.prev = currPg;
currPg.next = firstPg;
currPg = firstPg;
this.advance = function advance(duration) {
console.log("advance!", this);
var dur = duration || $.fx.speeds._default;
var dur2 = Math.ceil(dur / 2);
var dh = container.height();
var dw = container.width();
var nextPg = currPg.next;
nextPg.pg.css({
opacity: 1,
'z-index': null
});
var _pg = currPg;
currPg.testimonial.stop().animate({
'margin-left': -dw
}, dur, function () {
_pg.pg.css({
opacity: 0,
'z-index': -1
});
_pg = null;
});
nextPg.testimonial.stop()
.css({
'margin-left': dw
})
.animate({
'margin-left': 0
}, dur);
currPg.thumb.stop().animate({
'bottom': -dh
}, dur2, function () {
nextPg.thumb.stop()
.css({
'bottom': -dh
})
.animate({
'bottom': 0
}, dur2);
nextPg = null;
});
currPg = nextPg;
}
}
var s = new slider($('#banner'));
function scheduleNext() {
setTimeout(function () {
s.advance();
scheduleNext();
}, 5000);
}
scheduleNext();
对于下一个滑块,您需要:
$('#next').click(function(){
s.advance();
});
但无论如何,您必须使用参数构造通用动画方法。
检查以下示例:
和
您只需添加一个可变方向,然后单击“上一个”和“下一个”即可更改该方向
var direction = 'left';
$('#next').click(function(event) {
direction = 'right';
s.advance(1000,direction);
});
$('#prev').click(function(event) {
direction = 'left';
s.advance(1000,direction);
});
然后在检查方向变量的位置添加一行
if(direction == 'left')
var dw = container.width();
else if(direction =='right')
var dw = - container.width();
else{
console.log('Wrong direction')
return;
}
别忘了在高级函数中添加参数您需要定义“控制器”的含义,更具体地说明它的用途。因为你的代码看起来像是卡车撞到的,所以你可能也想考虑添加注释。@ MIKECHORKCHO控制器的滑块,意思是代码>下< /COD>移动到幻灯片和<代码> PREV显示前一个滑块。我想得到一个很好的建议。下次我会这样做。谢谢你的建议和建议