创建jQuery Slider的简单方法

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

我从HTML标记开始，从两个UL开始。一个保存分页，另一个保存幻灯片的内容。

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

HTML

<ul class="content-pagination">
    <li><a href="0"></a></li>
    <li><a href="1"></a></li>
    <li><a href="2"></a></li>
    <li><a href="3"></a></li>
    <li><a href="4"></a></li>
</ul>
<ul class="content-slides">
    <li>
        <img src="slides/background1.png" alt="" />
        <div class="desc">
            <h3>Heading 1</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background2.png" alt="" />
        <div class="desc">
            <h3>Heading 2</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background3.png" alt="" />
        <div class="desc">
            <h3>Heading 3</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background4.png" alt="" />
        <div class="desc">
            <h3>Heading 4</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background5.png" alt="" />
        <div class="desc">
            <h3>Heading 5</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
</ul>

我很难解决由我们古老的InternetExplorer7和稍微现代的InternetExplorer8浏览器引起的问题，所以我不得不干预他们专有的黑客形式并修复它们！最终的CSS是这样的：

CSS

.slider {padding: 0; height: 150px; position: relative; overflow: hidden; width: 270px;}
.slider .content-slides {position: absolute; top: 0; left: 0; padding: 0; margin: 0;}
.slider .content-slides li {width: 270px; height: 150px; position: relative; float: left; list-style: none;}
.slider .content-slides li img {width: 270px; height: 150px; display: block;}
.slider .content-slides li .desc {position: absolute; font-size: 90%; background: #999; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; width: 100%; overflow: hidden; padding: 0 0 5px;}
.slider .content-slides li .desc * {color: #fff; width: 200px; margin: 5px 10px; line-height: 1.1em;}
.slider .content-pagination {text-align: right; position: absolute; bottom: 10px; right: 10px; z-index: 5;}
.slider .content-pagination li {float: none; display: inline; font-size: 0.75em; padding: 0.25em;}
.slider .content-pagination li a {width: 7px; height: 7px; border-radius: 7px; background-color: #ccc; overflow: hidden; line-height: 10px; font-size: 1px; text-indent: -999em; display: inline-block; *display: inline; *zoom: 1;}
.slider .content-pagination li.active-marker a,
.slider .content-pagination li a:hover {background-color: #08c; color: #fff;}

是的，背景图像的宽度和高度是固定的，它们是270px × 150px。

现在是真正有趣的部分，我花了大约一个小时！JavaScript像任何东西一样耗费时间！：）我不得不承认，我在JavaScript中采取了一种低质量的方法，因为我只关心5内容在未来的滑块中总是带有分页和不可扩展。

JavaScript

首先，我不知道这些滑块是如何工作的，但我有一个小想法，UL将具有所有LIs的和的宽度，它保持不变。因此，这成为了第一个声明：

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

我需要一个计数器来保存请求的当前页面。所以我初始化了一个计数器index，并给它赋值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声明为全局变量，所以我可以在任何时间、任何地方访问它。它的作用域通过脚本和内部函数是有效的。我将当前页面的一个变量初始化为index的计数的模值除以滑块内子项数。

接下来是jQuery提供的令人敬畏的animate()函数。它用于在平滑过渡中更改CSS属性，而不是剧烈或突然的更改。此函数现在移动（滑动）列表容器UL的左侧位置，以适应下一个LI元素。

然后是分页的东西。它使用另一个很棒的CSS/jQuery Selector:nth-child()添加了当前幻灯片，它实际上选择了容器的第n个子级。加载幻灯片后，通过添加类active，相应的LI将被标记为活动。

最后，使用传统方式将index的值增加1！

进入下一个功能，它将click事件添加到分页按钮中。我认为这将是一种复杂的方式，但我设法以一种简单的方式做到了，只需设置index值，清除旧计时器，并重新启动滑块功能。

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

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

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

最终JavaScript

$(".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);
});

完整演示：http://jsbin.com/uhowak/2

希望这能帮助到别人！：）