Javascript滑块设置自动

时间:2013-11-08 16:16:46

标签: javascript jquery html

这是我的第一篇文章,

我正在寻找解决问题的方法,我在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
});
    });

提前非常感谢你!

纳乔。

0 个答案:

没有答案