创建jQuery Slider的简单方法

Question

我想创建一个简单的基于静态jQuery的滑块.现在我只有设计.它有一个小点作为右下角的分页,带有标题,图像和一些内容.它应该能够无限循环,并且还应该具有播放和暂停的能力.功能不多.

Answer 1

今天我尝试了一个带有固定分页的内容滑块.我实现了这个,我会在它发布后说.我本可以简单地使用一个插件,但由于一些技术问题,我也想学习一些东西,所以我在我的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>

我有点难以解决由我们古老的Internet Explorer 7和稍微现代的Internet Explorer 8浏览器引起的问题,所以我不得不插手他们专有的黑客攻击并修复它们!在最后的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被划分子女数内滑块.

接下来是animate()jQuery提供的强大功能.它用于更改平滑过渡中给出的CSS属性,而不是剧烈或突然的变化.此函数现在移动(滑动)列表容器的左侧位置UL以适合下一个LI元素.

然后是分页的东西.它增加了使用其他真棒当前幻灯片CSS/jQuery选择,:nth-child(),字面选择容器的第n个孩子.加载幻灯片后,LI通过添加类将相应的标记为活动active.

最后,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

希望这有助于某人!:)