jQuery幻灯片放映重新开始或结束
使用下面的代码,我得到了一个jQuery内容幻灯片,但是当我在开始或最后一张幻灯片时,下一个和上一个箭头消失了。如果你明白我的意思,我希望幻灯片继续回到开始或最后一张,这取决于当前的幻灯片 jQueryjQuery幻灯片放映重新开始或结束,jquery,Jquery,使用下面的代码,我得到了一个jQuery内容幻灯片,但是当我在开始或最后一张幻灯片时,下一个和上一个箭头消失了。如果你明白我的意思,我希望幻灯片继续回到开始或最后一张,这取决于当前的幻灯片 jQuery var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length; // Remove scrollbar in JS $('#slidesCon
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
var currentPosition=0;
var slideWidth=560;
变量幻灯片=$('.slide');
var numberOfSlides=slides.length;
//删除JS中的滚动条
$('slidecontainer').css('overflow','hidden');
//用#slideInner div包装所有幻灯片
幻灯片。wrapAll(“”)
//向左浮动以水平显示,重新调整。滑动宽度
.css({
‘float’:‘left’,
“宽度”:滑动宽度
});
//将#幻灯片内部宽度设置为所有幻灯片的总宽度
$('slideInner').css('width',slideWidth*numberOfSlides);
//在DOM中插入控件
$(“#幻灯片放映”)
.prepend('单击向左移动')
.append('Clicking right');
//第一次加载时隐藏左箭头控件
管理控制(当前职位);
//为控件创建事件侦听器。单击
$(“.control”)
.bind('单击',函数()){
//确定新位置
currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;
//隐藏/显示控件
管理控制(当前职位);
//使用边距向左移动滑块
$('slideInner')。设置动画({
“marginLeft”:滑动方向*(-currentPosition)
});
});
//manageControls:根据当前位置隐藏和显示控件
功能管理控制(位置){
//如果位置是第一张幻灯片,则隐藏左箭头
if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}
//如果位置是最后一张幻灯片,则隐藏右箭头
if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}
}
您必须删除对函数的调用,而不是对行的调用
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
使用代码
if(($(this).attr('id')=='rightControl')) {
if(currentPosition == numberOfSlides-1)
currentPosition = 0;
else
currentPosition++;
} else if($(this).attr('id')=='leftControl'){
if(currentPosition == 0)
currentPosition = numberOfSlides-1;
else
currentPosition--;
}
有关小提琴的更新版本,请参阅