我已经在这里坚持了2天,仍然无法得到我想要的结果。基本上它是一个带有“点”控件的简单内容滑块。单击某个点时,它将转到该幻灯片。它还有一个自动前进计时器,可在未单击时自动滚动。
到目前为止,我已经能够使自动滚动工作,但是当您点击该点时,它只会转到下一张幻灯片,而不是我点击的特定幻灯片。这几乎就像点是“下一个”控件一样。
所以最终我想要点击进入特定幻灯片的点数,并且当我鼠标移出时,它会继续从当前打开的幻灯片开始自动滚动。
这是我到目前为止的代码,你可以看到它正在运行。 http://jsfiddle.net/PGcY2/
谢谢!
答案 0 :(得分:1)
var totWidth=0;
var positions = [];
var current = 1;
jQuery('#home-slider .slide').each(function(i){
positions[i]= totWidth;
totWidth += jQuery(this).width();
});
jQuery('#home-slider').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
jQuery('#slide_menu ul li a').click(function(e,keepScroll){
jQuery('li.menuItem').removeClass('act').addClass('inact');
jQuery(this).parent().addClass('act');
var pos = jQuery(this).parent().prevAll('.menuItem').length;
jQuery('#home-slider').stop().animate({marginLeft:-positions[pos]+'px'},350);
/* Prevent the default action of the link */
e.preventDefault();
current = pos;
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) {clearItvl();}
});
var itvl = null;
function autoAdvance() {
if(current === -1) { return false; }
jQuery('#slide_menu ul li a').eq(current%jQuery('#slide_menu ul li a').length).trigger('click',[true]);
current++;
itvl = setTimeout(autoAdvance,3000);
}
function clearItvl() {
clearTimeout(itvl);
autoAdvance();
}
setTimeout(autoAdvance,3000);
你走了!在JSFiddle中尝试一下。您没有设置当前的滑块元素。我做了de current var global和voila,它就像一个魅力!祝你的项目伙伴好运!