我想创建一个简单的基于 jQuery 的静态滑块。现在我只有设计。它在右下角有小点作为分页，带有标题、图像和一些内容。它应该能够无限循环，还应该具有播放和暂停的能力。不需要太多功能。
【问题讨论】：
标签： javascript jquery html slider
今天我尝试了一个带有固定分页的内容滑块。我实现了这一点，我会在它发布后说。本来可以直接用插件的，但是由于技术上的问题，我也想学点东西，所以就在onw上做了。
我从 HTML 标记开始，从两个 ULs 开始。一个保存分页，另一个保存幻灯片的内容。
从这个 HTML 标记 开始，我转到 CSS 并定位 布局元素。
<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>
我很难解决由我们古老的 Internet Explorer 7 和略显现代的 Internet Explorer 8 浏览器引起的问题，因此我不得不干预它们的专有形式hacking 并修复它们！ 最终的 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 内容 总是 带有分页 而 不是可扩展在未来的一种滑块。
首先，我不知道这些滑块是如何工作的，但我有个小想法，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 的count 的模数 值除以滑块内的子项数。
接下来是 jQuery 提供的很棒的 animate() 函数。它用于在平滑过渡中更改 CSS 属性，而不是剧烈或突然的更改。此函数现在移动（滑动）列表容器 UL 的左侧位置以适应下一个 LI 元素。
然后是分页的东西。它使用另一个很棒的 CSS / jQuery 选择器 :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);
});
$(".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);
});
希望这对某人有所帮助！ :)
【讨论】：
setInterval。你看我给了% 5之类的东西，这使得index在0到4的范围内。
islider = setInterval(slideStart, 2500);