Javascript 创建jQuery滑块的简单方法

我想创建一个简单的基于jQuery的静态滑块。现在我只有设计。它在右下角有小圆点作为页码，带有标题、图像和一些内容。它应该能够无限循环，也应该能够播放和暂停。不需要太多功能。

今天我尝试了一个内容滑块，带有固定分页。我实现它是为了一些东西，我会在它发布后说。我本可以简单地使用一个插件，但由于一些技术问题，我也想学习一些东西，所以我在我的onw上做了

我从HTML标记开始，从两个

UL

s开始。一个保存分页，另一个保存幻灯片的内容

从这个HTML标记开始，我转到CSS并定位布局元素

HTML 是的，背景图像的宽度和高度是固定的，它们是

270px×150px

现在是真正有趣的部分，花了我大约一个小时！JavaScript会像任何东西一样消耗大量时间我必须承认，我在JavaScript中采用了一种低质量的方法，因为我只关心5个内容总是分页，并且不可伸缩，在将来类似于滑块

JavaScript 首先，我不知道这些滑块是如何工作的，但我有一个小小的想法，即

UL

将具有所有

LI

s总和的宽度，它可以容纳。因此，这成为第一句话：

$(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());

我需要一个计数器来保存请求的当前页面。所以我初始化了一个计数器

索引

，并给它赋值

0

。你们很多人都错过了这一部分！！！再加上这个

index = 0;

下一步是创建一个函数，该函数为整个滑块设置动画。是的，我用jQuery来帮我！所以，函数是这样的：

function slideStart()
{
    curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
    $(".slider .content-slides").animate({
        "left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
    });
    $(".slider .content-pagination li").removeClass("active-marker");
    $(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
    index++;
}

由于我将

index

声明为全局变量，因此我可以随时从任何地方访问它。它的作用域通过脚本和内部函数有效。我为当前页面初始化了一个变量，即

索引

计数的模值除以滑块内的子级数

接下来是jQuery提供的awesome

animate（）

函数。它用于在平滑过渡中更改CSS属性，而不是剧烈或突然的更改。此函数现在移动（滑动）列表容器的左位置

UL

，以适应下一个

LI

元素

然后是分页的东西。它使用另一个很棒的CSS/jQuery选择器添加当前幻灯片，

：nth-child（）。加载幻灯片后，相应的
LI
将通过添加类
active
标记为active

最后，使用传统方法将
索引的值增加1

进入下一个函数，该函数将
单击事件添加到分页按钮。我原以为这是一种复杂的方法，但我设法用一种简单的方法来实现，只需设置
索引
值，清除旧计时器，然后重新启动滑块函数

$(".slider .content-pagination li a").click(function(){
    index = $(this).attr("href");
    clearInterval(islider);
    slideStart();
    islider = setInterval("slideStart()", 2500);
    return false;
});

$(document).ready(function(){
    slideStart();
    islider = setInterval("slideStart()", 2500);
});

我添加了一个
返回false以防止链接跟随其URL，否则它将从其
href
属性打开URL。现在是最后一部分，也是最重要的一部分。脚本的初始值设定项。我们只需要使用函数
slideStart（）
启动滑块，并让它以固定的间隔运行，比如2.5秒。由于它需要在加载文档后执行，因此它在
$（document）.ready（）函数中给出

$(".slider .content-pagination li a").click(function(){
    index = $(this).attr("href");
    clearInterval(islider);
    slideStart();
    islider = setInterval("slideStart()", 2500);
    return false;
});

$(document).ready(function(){
    slideStart();
    islider = setInterval("slideStart()", 2500);
});

最终JavaScript
完整演示：
希望这对别人有帮助！：）
 对于投票决定关闭的人，我只是分享了我对一个非常有限的用例的经验，如。希望这不是问题？是的，我也期待着其他的想法和答案！：）是的，好的，马特。我只是想创造一个自己的东西。就是这样。为什么在这个问题中需要无限循环的方法？答案应该是正确的？@PraveenKumar这是到目前为止提供的@PraveenKumar的在线演示：@PraveenKumar及其循环方式？使用
setInterval
。你看，我给出了类似于
%5
的东西，这使得
索引从
0
到
4
@PraveenKumar。你提供的演示根本没有时间看第一张幻灯片，也没有循环。@PraveenKumar+1用于编辑（+demo），但是，当页面第一次加载时-没有活动按钮，我们需要等到第一次“循环启动”时才能看到它处于活动状态。不过演示还是不错的。干得好（尽管如此，这个问题可能更具描述性。）顺便说一句，使用：
islider=setInterval（slideStart，2500）
$(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());


function slideStart()
{
    curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
    $(".slider .content-slides").animate({
        "left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
    });
    $(".slider .content-pagination li").removeClass("active-marker");
    $(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
    index++;
}


$(".slider .content-pagination li a").click(function(){
    index = $(this).attr("href");
    clearInterval(islider);
    slideStart();
    islider = setInterval("slideStart()", 2500);
    return false;
});

$(document).ready(function(){
    index = 0;
    islider = setInterval("slideStart()", 2500);
});