这是我的第一篇文章,
我正在寻找解决问题的方法,我在http://www.creo.com.uy/web/mytho/处有一个jquery滑块,我希望自动旋转。
问题是:我需要在自动旋转中设置滑块。也就是说,两个选项,单击箭头和自动滑动。 原始代码没有附带,即使是开发此主题的人,也告诉我他们没有添加该功能。 所以对于一个了解javascript的朋友,我们处理.js文件来添加一些代码,但我们遗漏了一些东西,在最后一个图片中,它进入一个递归循环,从4到3,从3到4,等等。
我在这里提供了两个文件,原始文件和修改过的文件,我希望你能帮助我!
原件:
jQuery(document).ready(function($) {
"use strict";
//prev = top
//current = middle
//next = bottom
var windowHeight = $(window).height();
$('.slide:first-child').addClass('current');
$('.slide:nth-child(2)').addClass('next').css('top', windowHeight);
$(window).resize(function() {
windowHeight = $(window).height();
$('.slide.next').css('top', windowHeight);
$('.slide.prev').css('top', -windowHeight);
});
if (!$('.slide.current').next('.slide').length) { $('#next').hide(); }
if (!$('.slide.current').prev('.slide').length) { $('#prev').hide(); }
function nextSlide() {
var current = $('.slide.current'),
next = current.next('.slide'),
prev = current.prev('.slide');
if (next.length) {
current.animate({
top: -windowHeight
}, 300);
next.animate({
top: 0
}, 300);
prev.removeClass('prev');
current.removeClass('current').addClass('prev');
next.removeClass('next').addClass('current');
next.next('.slide').addClass('next').css('top', windowHeight);
if (!$('.slide.current').next('.slide').length) {
$('#next').hide();
$('#prev').show();
} else {
$('#next').show();
}
}
}
function prevSlide() {
var current = $('.slide.current'),
next = current.next('.slide'),
prev = current.prev('.slide');
if (prev.length) {
current.animate({
top: windowHeight
}, 300);
prev.animate({
top: 0
}, 300);
next.removeClass('next');
current.removeClass('current').addClass('next');
prev.removeClass('prev').addClass('current');
prev.prev('.slide').addClass('prev').css('top', -windowHeight);
if (!$('.slide.current').prev('.slide').length) {
$('#prev').hide();
$('#next').show();
} else {
$('#prev').show();
}
}
}
$('#next').live('click', function() {
nextSlide();
return false;
});
$('#prev').live('click', function() {
prevSlide();
return false;
});
//Add swipe capabilities
$(".slide").swipe( {
swipeUp:function(event, direction, distance, duration, fingerCount) {
nextSlide();
},
swipeDown:function(event, direction, distance, duration, fingerCount) {
prevSlide();
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
修改:
jQuery(document).ready(function($) {
"use strict";
//prev = top
//current = middle
//next = bottom
var windowHeight = $(window).height();
var timeSlider = 3000;
var move = setTimeout(autoSlider,timeSlider);
function autoSlider(){
if (!$('.slide.current').next('.slide').length) {
prevSlide();
}else{
nextSlide();
}
}
$('.slide:first-child').addClass('current');
$('.slide:nth-child(2)').addClass('next').css('top', windowHeight);
$(window).resize(function() {
windowHeight = $(window).height();
$('.slide.next').css('top', windowHeight);
$('.slide.prev').css('top', -windowHeight);
});
if (!$('.slide.current').next('.slide').length){
$('#next').hide();
}
if (!$('.slide.current').prev('.slide').length){
$('#prev').hide();
}
function nextSlide() {
var current = $('.slide.current'),
next = current.next('.slide'),
prev = current.prev('.slide');
if (next.length) {
current.animate({
top: -windowHeight
}, 300);
next.animate({
top: 0
}, 300);
prev.removeClass('prev');
current.removeClass('current').addClass('prev');
next.removeClass('next').addClass('current');
next.next('.slide').addClass('next').css('top', windowHeight);
if (!$('.slide.current').next('.slide').length) {
$('#next').hide();
$('#prev').show();
} else {
$('#next').show();
}
}
clearTimeout(move);
move = setTimeout(autoSlider,timeSlider);
}
function prevSlide() {
var current = $('.slide.current'),
next = current.next('.slide'),
prev = current.prev('.slide');
if (prev.length) {
current.animate({
top: windowHeight
}, 300);
prev.animate({
top: 0
}, 300);
next.removeClass('next');
current.removeClass('current').addClass('next');
prev.removeClass('prev').addClass('current');
prev.prev('.slide').addClass('prev').css('top', -windowHeight);
if (!$('.slide.current').prev('.slide').length) {
$('#prev').hide();
$('#next').show();
} else {
$('#prev').show();
}
}
clearTimeout(move);
move = setTimeout(autoSlider,timeSlider);
}
$('#next').live('click', function() {
nextSlide();
return false;
});
$('#prev').live('click', function() {
prevSlide();
return false;
});
//Add swipe capabilities
$(".slide").swipe( {
swipeUp:function(event, direction, distance, duration, fingerCount) {
nextSlide();
},
swipeDown:function(event, direction, distance, duration, fingerCount) {
prevSlide();
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
提前非常感谢你!
纳乔。