jQuery图像滑块的困难

Question

我在创建一个也可以包含其他元素(如：<div>，<a>，<span>)的jQuery图像滑块时遇到了麻烦。我浏览了互联网上的教程，下载了几个项目，结果发现它们不容易编辑。我的结论是，最好的方法是从头开始创建一个。有没有人知道一个好的文档来源，可以帮助我完成创建基本jQuery图像滑块的基础知识，它能够显示我的html中的所有元素？

下面是html/js: Html：

<div id="container">
<div id="pbody">
    <div id="slides">
        <div title="Slider 1" style="background-image: url(images/TCM_slider1_WW_v1.jpg); display:block;" class="current billboard">
            <p class="big">Slider 1</p>
            <a href="#" class="black_button">
                <span>Learn more</span>
            </a>
        </div>
        <div title="Slider 2" style="background-image: url(images/TCM_slider2_WW_v1.jpg); display:block;" class="billboard">
            <p class="big">Slider 2</p>
            <a href="#" class="black_button">
                <span>Learn more</span>
            </a>
        </div>
    </div>
    <ol id="controls">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <a href="javascript:;" id="prev">Prev</a>
    <a href="javascript:;" id="next">Next</a>
</div>

​

Javascript：

var cycle = window.setInterval(next, 4000);
function prev() {
$('#slides .billboard .current')
    .removeClass('billboard current')
    .prev().add('#slides :last')
    .first().addClass('billboard current')
;
$('#controls .current')
    .removeClass('current')
    .prev().add('#controls :last')
    .first().addClass('current')
;
}

function next() {
$('#slides .billboard .current')
    .removeClass('billboard current')
    .next().add('#slides :first')
    .last().addClass('billboard current')
;
$('#controls .current')
    .removeClass('current')
    .next().add('#controls :first')
    .last().addClass('current')
;
}

$('#prev').on('click', prev);
$('#next').on('click', next);
$('#controls li').on('click', function() {
$self = $(this)
    .addClass('current')
    .siblings('.current').removeClass('current')
    .end()
;
$('#slides  .billboard .current')
    .removeClass('billboard current')
    .siblings(':nth-child(' + ($self.index() + 1) + ')').addClass('billboard current');
});

Answer 1

我已经创建了一个基本的概念验证HTML幻灯片，可以帮助您入门。

请参阅jsFiddle。

• 幻灯片放映包含“上一页”/“下一页”按钮和页码导航。
• 它可以包含任意数量的幻灯片，并将循环播放幻灯片。幻灯片可以包含任何内容，包括HTMLElements.
• There。幻灯片没有过渡效果，但可以使用jQuery或CSS3

添加。