Javascript jQuery滑块没有';t旋转
我在我的网站上有一个滑动旋转器,但它不会自动旋转框中的项目-导航工作并旋转,但我希望它在我进入网站后自动旋转。 这是我的js:Javascript jQuery滑块没有';t旋转,javascript,jquery,Javascript,Jquery,我在我的网站上有一个滑动旋转器,但它不会自动旋转框中的项目-导航工作并旋转,但我希望它在我进入网站后自动旋转。 这是我的js: $(document).ready(function() { var nbr = 0; $('.slider').each(function() { var slider = $(this); //get width and height of the wrapper and give it to the UL var wrap
$(document).ready(function() {
var nbr = 0;
$('.slider').each(function() {
var slider = $(this);
//get width and height of the wrapper and give it to the UL
var wrapperwidth = $(slider).width() * $(slider).find('ul > li').size();
$(slider).find('ul').css('width', wrapperwidth);
var wrapperheight = $(slider).height();
$(slider).find('ul').css('height', wrapperheight);
//set my li width
var width = $(slider).width();
$(slider).find('ul li').css('width', width);
//set my counter vars
var counter = $(slider).find('ul > li').size();
var decount = 1;
var autocount = 1;
if (counter > 1) {
//create my number navigation
var createNum = 1;
$(slider).after('<ul class="numbers"><li></li></ul>');
var numbers = $(slider).parent().find('.numbers');
$(numbers).find('li:first-child').html(createNum+'_'+nbr).addClass('activenum').attr('id', 'id1_'+nbr);
while ( createNum != counter) {
createNum++;
$(numbers).append("<li id='id"+createNum+"_"+nbr+"'>"+createNum+"_"+nbr+"</li>");
}
//get my number-width (number navigation should always be centered)
var numwidth = $(slider).find('.numbers li:first-child').width() * $(slider).find('.numbers li').size();
$(slider).find('.numbers').css('width', numwidth);
}
nbr++;
});
//make the number clickable
$(".numbers li").click(function() {
var slider = $(this).closest('.sliderWrapper');
var slider0 = $(slider).find('.slider');
var clickednum = $(this).html().split('_')[0] * - $(slider0).width() + $(slider0).width();
$(slider0).find('ul').animate({ left: clickednum }, 400, 'swing', function() { });
$(slider).find('.activenum').removeClass('activenum');
$(this).addClass('activenum');
decount = $(this).html();
});
rotateSwitch = function(sliderW, speed) {
var sliderWrap = sliderW;
play = setInterval(function() {
var nextNum = parseInt($($(sliderWrap).find(".numbers li.activenum")).html().split('_')[0])+1;
if (nextNum > $(sliderWrap).find(".numbers li").length) {
nextNum = 1;
}
//console.log("nextnum: "+nextNum+", numbers length: "+$(sliderWrap).find(".numbers li").length);
$(sliderWrap).find(".numbers li").each(function() {
if( parseInt($(this).html().split('_')[0]) == nextNum )
$(this).click();
});
}, speed);
};
makeAutoSlide = function(sliderWrap, speed) {
if ($(sliderWrap).length > 0 && $(sliderWrap).find(".numbers li").length > 1) {
rotateSwitch(sliderWrap, speed);
$(sliderWrap).find(".slider li").hover(function() {
if ($(sliderWrap).find(".numbers li").length > 1) {
clearInterval(play); //Stop the rotation
}
}, function() {
if ($(sliderWrap).find(".numbers li").length > 1) {
rotateSwitch(sliderWrap, speed); //Resume rotation timer
}
});
}
};
});
$(文档).ready(函数(){
var-nbr=0;
$('.slider')。每个(函数(){
变量滑块=$(此);
//获取包装的宽度和高度,并将其交给UL
var wrapperwidth=$(滑块).width()*$(滑块).find('ul>li').size();
$(滑块).find('ul').css('width',wrapperwidth);
var wrapperheight=$(滑块).height();
$(滑块).find('ul').css('height',wrapperheight);
//设置我的li宽度
变量宽度=$(滑块).width();
$(滑块).find('ul li').css('width',width);
//设置我的计数器变量
变量计数器=$(滑块).find('ul>li').size();
var-decount=1;
var自动计数=1;
如果(计数器>1){
//创建我的号码导航
var createNum=1;
$(滑块)。之后(“”);
var numbers=$(slider.parent().find('.numbers');
$(数字).find('li:first child').html(createNum+''.+nbr).addClass('activenum').attr('id','id1'+nbr));
while(createNum!=计数器){
createNum++;
$(数字)。追加(“- “+createNum+”“+nbr+”
”;
}
//获取我的数字宽度(数字导航应始终居中)
var numwidth=$(滑块).find('.numbers li:first child').width()*$(滑块).find('.numbers li').size();
$(滑块).find('.numbers').css('width',numwidth);
}
丁腈橡胶++;
});
//使数字可点击
$(“.numbers li”)。单击(函数(){
var slider=$(this).closest('.sliderrapper');
var slider0=$(slider.find('.slider');
var clickednum=$(this.html().split(“”“)[0]*-$(slider0.width()+$(slider0.width());
$(slider0).find('ul').animate({left:clickednum},400,'swing',function(){});
$(滑块).find('.activenum').removeClass('activenum');
$(this.addClass('activenum');
decount=$(this.html();
});
旋转开关=功能(滑块、速度){
var sliderRap=滑块;
play=setInterval(函数(){
var nextNum=parseInt($($(sliderRap).find(“.numbers li.activenum”)).html().split(“”“)[0])+1;
if(nextNum>$(sliderWrap.find(“.number”).length){
nextNum=1;
}
//log(“nextnum:+nextnum+”,数字长度:“+$(sliderrap.find(.numbers li”).length);
$(SliderRap).find(“.number”).each(function(){
if(parseInt($(this).html().split(“”“')[0])==nextNum)
$(此选项)。单击();
});
},速度);
};
makeAutoSlide=功能(滑块、速度){
if($(sliderrap.length>0&$(sliderrap.find(“.number”).length>1){
旋转开关(滑块、速度);
$(SliderRap).find(“.slider li”).hover(函数(){
如果($(SliderRap).find(“.numbers”).length>1){
clearInterval(播放);//停止旋转
}
},函数(){
如果($(SliderRap).find(“.numbers”).length>1){
旋转开关(滑块,速度);//恢复旋转计时器
}
});
}
};
});
我不确定这是setInterval和clearInterval的问题,还是我写错了什么
我将代码放在JSFIDLE中,因此您知道该结构的外观。
谢谢你的帮助。
干杯小提琴没有重现问题。请尝试共享一个有效的代码来重现您的问题这就是为什么我写的FIDLE只用于HTML结构,基本上这个旋转器用于CMS,所以有很多行包含CMS命令,所以这不起作用。我想知道的是,如果我在这个js中写错了什么,或者clearinterval和setinterval被错误地使用了,你在哪里调用
makeAutoSlide()
函数?如果你不调用自动旋转函数,你就无法实现它。事实上,没有oO。我应该叫它在哪里?在文件的末尾。准备好了<代码>$(文档).ready(函数(){[…所有代码….]makeAutoSlide();})代码>