Javascript jQuery滑块不开始

Javascript jQuery滑块不开始,javascript,jquery,html,css,slider,Javascript,Jquery,Html,Css,Slider,我正在开发一个小jQuery小部件,以添加到我的公文包/知识库中。小部件可以工作,并在5张幻灯片中循环,但是,它不会像应该的那样循环回到幻灯片1。它只前进到空白幻灯片,页面需要刷新才能再次前后移动。我是一个Javascript/jQuery初学者,所以我肯定我错过了一些简单的东西,但我无法用我的一生来理解它。非常感谢您的帮助 /(document.ready();确保页面上的所有元素都是 //在加载脚本之前加载 $(文档).ready(函数(){ //警报(“单据已加载”); //指定从一个图

我正在开发一个小jQuery小部件,以添加到我的公文包/知识库中。小部件可以工作,并在5张幻灯片中循环,但是,它不会像应该的那样循环回到幻灯片1。它只前进到空白幻灯片,页面需要刷新才能再次前后移动。我是一个Javascript/jQuery初学者,所以我肯定我错过了一些简单的东西,但我无法用我的一生来理解它。非常感谢您的帮助

/(document.ready();确保页面上的所有元素都是
//在加载脚本之前加载
$(文档).ready(函数(){
//警报(“单据已加载”);
//指定从一个图像到另一个图像的更改速度,单位为毫秒
无功转速=500;
//指定自动滑块选项
var自动开关=真;
//自动滑行速度
var自动开关速度=4000;
//添加初始活动类
$('.slide').first().addClass('active');
//隐藏所有幻灯片
$('.slide').hide();
//放映第一张幻灯片
$('.active').show();
$('#next')。在('单击',函数()上){
$('.active').removeClass('active').addClass('oldActive');
如果($('.oldactive').is('slider:last child')){
//警报(“真”);
$('.slide').first().addClass('active');
}否则{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide')。淡出(速度);
$('.active').fadeIn(速度);
});
$('prev')。在('click',function()上{
$('.active').removeClass('active').addClass('oldActive');
如果($('.oldactive')。是(':first child')){
$('.slide').last().addClass('active');
}否则{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide')。淡出(速度);
$('.active').fadeIn(速度);
});
});
*{
保证金:0;
填充:0;
}
身体{
字体系列:“Arial”,无衬线;
字体大小:14px;
颜色:#fff;
背景:#333;
线高:1.6em;
}
a{
颜色:#fff;
文字装饰:无;
}
h1{
文本对齐:居中;
边缘底部:20px;
}
#容器{
宽度:980px;
利润率:40px自动;
溢出:隐藏;
}
#滑块{
宽度:940px;
高度:350px;
位置:相对位置;
溢出:隐藏;
浮动:左;
填充:3倍;
边框:#666实心2px;
边界半径:5px;
}
#滑块式img{
宽度:940px;
高度:350px;
}
.幻灯片{
位置:绝对位置;
}
.幻灯片副本{
位置:绝对位置;
底部:0;
左:0;
填充:20px;
背景:7F7F;
背景:rgba(0,0,0,0.5);
}
#前,
#下一个{
浮动:左;
边缘顶部:130像素;
光标:指针;
位置:相对位置;
z指数:100;
}
#上{
右边距:-45px;
}
#下一个{
左边距:-45px;
}

jQuery内容滑块
jQuery内容滑块
滑块一
Lorem ipsum dolor sit amet,是一位杰出的献身者。Sed vitae commodo sem。整数厄洛斯·尼布,摩尔斯蒂·康格元素,马蒂斯·内克·托托。Vivamus sed hendrerit sed vitae orci convallis

滑块二 Lorem ipsum dolor sit amet,是一位杰出的献身者。Sed vitae commodo sem。整数厄洛斯·尼布,摩尔斯蒂·康格元素,马蒂斯·内克·托托。Vivamus sed hendrerit sed vitae orci convallis

滑块三 Lorem ipsum dolor sit amet,是一位杰出的献身者。Sed vitae commodo sem。整数厄洛斯·尼布,摩尔斯蒂·康格元素,马蒂斯·内克·托托。Vivamus sed hendrerit sed vitae orci convallis

滑块四 Lorem ipsum dolor sit amet,是一位杰出的献身者。Sed vitae commodo sem。整数厄洛斯·尼布,摩尔斯蒂·康格元素,马蒂斯·内克·托托。Vivamus sed hendrerit sed vitae orci convallis

滑块5 Lorem ipsum dolor sit amet,是一位杰出的献身者。Sed vitae commodo sem。整数厄洛斯·尼布,摩尔斯蒂·康格元素,马蒂斯·内克·托托。Vivamus sed hendrerit sed vitae orci convallis

在脚本中添加此代码。这将启用循环效果。尝试使用您的代码,但对我来说有点复杂。试试这个方法,它会很有魅力的

请参阅片段

/(document.ready();确保页面上的所有元素都是
//在加载脚本之前加载
$(文档).ready(函数(){
//警报(“单据已加载”);
//指定从一个图像到另一个图像的更改速度,单位为毫秒
无功转速=1000;
//指定自动滑块选项
var自动开关=真;
//自动滑行速度
var自动开关速度=4000;
//添加初始活动类
$('.slide').first().addClass('active');
//隐藏所有幻灯片
$('.slide').hide();
//放映第一张幻灯片
$('.active').show();
$('#next')。在('单击',函数()上){
$('.active').removeClass('active').addClass('oldActive');
如果($('.oldactive').is('slider:last child')){
//警报(“真”);
$('.slide').first().addClass('active');
}否则{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide')。淡出(速度);
$('.active').fadeIn(速度);
});
$('prev')。在('click',function()上{
$('.active').removeClass('active').addClass('oldActive');
如果($('.oldactive')。是(':first child')){
$('.slide').last().addClass('active');
}否则{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide')。淡出(速度);
$('.active').fadeIn(速度);
});
});
var cur = 0,    // Start Slide Index. We'll use ++cur to increment index
    pau = 2000,            // Pause Time (ms)
    fad = 500,             // Fade Time (ms)
    $ga = $('#slider'),   // Cache Gallery Element
    $sl = $('> div', $ga), // Cache Slides Elements
    tot = $sl.length,      // We'll use cur%tot to reset to first slide
    itv ;                  // Used to clear on mouseenter

$sl.hide().eq( cur ).show(); // Hide all Slides but desired one

function stopFn() { clearInterval(itv); }
function loopFn() { itv = setInterval(fadeFn, pau); }
function fadeFn() { $sl.fadeOut(fad).eq(++cur%tot).stop().fadeIn(fad); }
$ga.hover( stopFn, loopFn );

loopFn(); // Finally, Start
    if($('.oldActive').is(':last-child')){
        //alert('true');
        $('.slide').first().addClass('active');
    } else {
        $('.oldActive').next().addClass('active');  
    }
var hwSlideSpeed = 700;
var slideNum = 0;
slideCount = $("#slider .slide").size(); //Count of slides
var animSlide = function(arrow){
    $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
    if(arrow == "next"){
        if(slideNum == (slideCount-1)){slideNum=0;}
        else{slideNum++}
        }
    else if(arrow == "prew")
    {
        if(slideNum == 0){slideNum=slideCount-1;}
        else{slideNum-=1}
    }
    else{
        slideNum = arrow;
        }
    $('.slide').eq(slideNum).fadeIn(hwSlideSpeed);
}

$('#nextbutton').click(function(){
    animSlide("next");

    })
$('#prewbutton').click(function(){
    animSlide("prew");
    })