jquery - jQuery 图像 slider 的困难

Question

我在创建一个也可以包含其他元素的 jQuery 图像 slider 时遇到问题(即: <div> 、 <a> 、 <span> )我浏览了互联网上的教程并下载了几个项目，结果发现它们不容易编辑。我得出的结论是，最好的方法是从头开始制作一个。有谁知道一个好的文档源可以帮助我了解创建基本 jQuery 图像 slider 的基础知识，该 slider 能够显示 html 中的所有元素？

下面是html/js:网页:

<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 .

• 幻灯片包含上一页/下一页按钮和页码导航。
• 它可以有任意数量的幻灯片，并且可以无限循环。
• 幻灯片可以包含任何内容，包括 HTMLElement。
• 没有过渡，但可以使用 jQuery 添加它们或CSS3